hexo+github搭建个人博客基础篇

最近想用GitHub搭建个人博客,于是下功夫搜索了一番。网上有很多的教程,最终决定用hexo来搭建,因为简单、快速。本教程只是对整个搭建的记录,以及遇到的一些坑,高手可以直接跳过。

说明:本教程针对window环境

首先hexo是一款基于Node.js的静态博客框架, 官网传送门,所以你要了解一些node基础;其次是结合github自然要有一个github账号;最后hexo生成的代码上传需要用到git。

准备工作

1、安装node

2、安装git

3、申请github账号

上面步骤都很简单,不具体说明了,不懂得赶紧去恶补。

安装hexo

npm install hexo-cli -g

进入放博客的文件夹,执行下面命令:

hexo init blog      // 该命令会创建一个blog的文件夹,里面就是相关配置文件。

cd blog              // 进入blog文件夹

npm install       // 安装package.json里配置的模块

hexo server     // 运行本地服务,在网页中查看效果。


安装完后进入文件夹,可以看到如下文件夹及文件:

node_modules   // npm 的安装模块文件

scaffolds           // 布局文件

source              // 资源文件,文章都放在该文件下的_posts

themes             // 主题文件

.gitignore         // git上传忽略文件配置

_config.yml     // 核心配置文件

package.json    // 描述npm安装包的文件

新建文章:

hexo new [layout] title

layout 即scaffolds 中的文件

hexo new 'post'  // 新建文章,如果没有指定布局,默认新建的是post布局, 新文章在source 下的_posts下

hexo new page 'node' // 在文件夹source下,的page下新建一个名为node的文章,如果没有page文件夹会自动新建一个。

当然也可以手动添加文件和文件夹。

github上传配置

当在本地写好文章后就要传到github上,下面做相关配置。

打开_config.yml文件,在最小面找到deploy字段,做如下配置:

deploy:

type: git

repo: git@github.com:youname/youname.github.io.git(将youname换成你的GitHub名字)

branch: master

然后执行npm install hexo-deployer-git --save, 安装相关模块,不然上传代码时会报错。

配置Github

创建一个与你用户名相同的仓库,如: youname.github.io,youname 换成你的github用户名

在本地git中生成钥密,ssh-keygen -t rsa -C"youremail@example.com" 邮箱换成自己邮箱,然后一路回车,使用默认值即可。如果一切顺利的话,可以在用户主目录里找到.ssh目录,里面有id_rsa和id_rsa.pub两个文件。打开id_rsa.pub,复制里面的所有内容,然后登陆GitHub,打开个人的settings,选中SSH and GPG keys 选项,然后,点NEW SSH Key,填上任意Title,在文本框里粘贴id_rsa.pub文件的内容。

关于git的用法以及github相关配置不懂得可以移步廖雪峰老师的站点学习<传送门>

生成文件上传github

hexo generate  // 生成静态页面文件夹public

hexo server      // 开启本地服务查看效果(默认端口4000)

hexo deploy     // 将.deploy目录部署到GitHub

hexo clean       // 删除public文件夹

每次上传文件前要先删除public文件夹,在生成静态页面,最后上传github,故执行如下命令:

hexo clean

hexo generate

hexo deploy

打开你的github,查看youname.github.io文件上传成功没,如果成功了在网址中打开youname.github.io,查看博客

注:在window环境下,执行hexo deploy命令一定要在git bash里运行,不能在cmd中运行,不然报错,当时为了这个问题坑了一把。

遇到的坑:

刚开始win10上没有问题,重装系统后,在win10下安装hexo-cli后运行相关命令报了个错,hexo不是内部或外部命令。网上找了一通,发现hexo没有配置全局变量。将该路径加入到环境变量C:\Users\youname\AppData\Roaming\npm。其中youname换成你电脑的用户名。这是发现hexo命令正常了。执行hexo s时cmd中提示在4000端口查看效果,结果浏览器输入4000端口没有效果。网上又折腾了一番,结果发现4000端口被占用了。执行hexo s -p 1234之后再1234端口打开就正常了。我的电脑上4000端口被福析阅读器的一个安全程序占用了,叫做foxitprotect.exe的程序,把它杀死后就能在4000端口上正常显示了。

小技巧:

每次重新上传都要执行者三个命令会很麻烦,可以偷个懒,打开package.json文件,在里面加入scripts字段:

"scripts": {

    "dev": "hexo clean && hexo g && hexo d"

}

然后在git bash 里执行npm run dev即可一步执行这些操作。

域名配置

到此博客基本搭建完成,如果你想要你的博客有个独特的域名,其实配置非常简单。

1、购买域名

2、配置解析

以万网申请的域名为例,如图:


3、在在public文件夹下新建名为CNAME的文件,

在里面填写你的域名,执行hexo d上传代码,输入域名查看效果。

tips:每次执行hexo clean 后public文件都被删除了,CNAME文件也被删除了,这样每次都要重新创建这个文件会很麻烦。其实解决办法很简单,把配置文件CNAME放在source文件下,重新生成后,你发现在public文件中就有CNAME这个文件了。

结语

到此博客就搭建完成了,但是对于hexo还有一块很重要的没有讲,那就是主题。hexo的强大体现在它丰富的主题。下期就讲一下我非常喜欢的一款简洁、漂亮的主题yilia。主题篇已完成[传送门]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容