使用框架Hexo在Github上搭建个人博客

Hexo+Github [Mac环境]假如你有一个Github帐号，我们就可以开始了，如果没有，就去注册好了。想想不是很难的事吧，一个邮箱就行了，别的都不需要。

1. 配置远程和本地Github

1.1 在 Github 上创建一个仓库（Repo）

登陆Github网址，用你的账号登陆进去，点右上角的+，弹出菜单选择New repository,在弹出的Repository name下面的文本框内按照yourname.github.io 这种格式输入，然后选中

Public, 最后点击绿色的Create repository创建成功。

重新登陆，点右上角你的头像，在弹出的菜单中选中Your profile,会发现“youname.github.io”分支创建成功，点击进去，在右边找到Settings,在左侧栏最下面找到Deploy keys,点击Add deploy key,输入你的”key”,密匙的求解过程请参见Git密匙,至此远程仓库部分已经配置完成。

如果你对git很感兴趣，或者，对git的命令行方式很头疼的，可以阅读此物: Git入门教材

⚠️我的git仓库名字为zhaodongchun.github.io,用你自己的名字好了.

1.2 确认本地已经安装好 git 和 npm

在终端输入下面两条命令，确认已经安装好git和npm,如果电脑还没装这两个东西的，请参照官方文档安装：Git入门教材+npm中文文档

git --version
npm --version

2. 配置Hexo

1） 安装 hexo

先通读官方文档hexo自动部署网站,不需要看内容，快速翻一遍知道有这个工具在这里就可以了，以后需要时再调用它。然后终端输入以下命令

git --version
npm --version

2） 创建本地工作目录

先登陆到github，点击你的分支yourname.github.io,在右边有个绿色的按钮Clone or download,点开后点击copy to clipboard把自己的git地址拷贝出来，在终端cd到你希望把站点放置的位置，下面我cd到Desktop了

cd ~/Desktop
git clone https://github.com/zhaodongchun/zhaodongchun.github.io.git

3）初始化你的本地站点

hexo init yourname.github.io
cd yourname.github.io
npm install hexo-deployer-git --save
hexo generate
hexo server

在终端打完以上命令后，如果最后显示Database saved，代表本地站点已经初始化完成，可以终端里按住ctrl的同时点击http://localhost:4000/查看你的站点了，需要注意的是这个效果是hexo默认模版landscape的效果，我们看看怎么更换模版为Next模版。

4）设置个人模版

这里涉及两个东西，一个是Hexo,一个是Next,我们先到Hexo模版，先看看都有哪些模版可供我们选择，如果你点击模版下面的大标题名字后会进入到github的源文件地址，和创建本地工作目录一样，可以把它的Git地址拷贝出来。先以next模版为例，先定位到Hexo站点目录下，在终端输入以下命令安装

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

安装完成后，修改配置文件_config.yml中的 theme 字段为 next后保存，至此我们完成了站点配置。在终端继续输入以下命令完成模版调试，如果再此出现Database saved，代表本地站点已经初始化完成，可以终端里按住ctrl的同时点击http://localhost:4000/查看你的站点了

hexo server --debug

5） 使用Atom码文章

先把Atom下载下来，官网直接下载安装或在终端输入下面命令也可以，如果对Atom还不熟悉没关系，先从官方文档开始逐渐建立Atom语法吧，在线阅读:飞行手册

给 Atom 安装一个命令行面板，Atom 里同时按command+，调出setting面板，定位到install选项，在文本框中搜索platformio-ide-terminal后点击install安装atom包，安装完成后按command+shift+t在下面会出现一个终端，这个包的作用就是解决总是来回切换atom和终端的问题。

完成上面的操作后，我们对包大概有了个概念，下面继续安装一个markdown包，点击Atom菜单下的Preference的左侧倒数第二项+ install，输入markdown，依次安装几个包

• markdown-scroll-sync
• linter-markdown
• markdown-writer
• markdown-toc
• markdown-pdf
• markdown-preview

然后就是随便折腾一会，看看这几个都实现什么功能，接下来用markdown书写文章的过程中会经常使用这几个包

/Desktop/zhaodongchun.github.io/zhaodongchun.github.io,这是我的目前位置，在mac终端输入ls查看你是否在根路径下，然后终端输入atom .在atom中打开所有文件，然后使用快捷键command+shift+t打开atom终端，mac的终端就可以关闭了，在左侧栏定位到source文件夹下的_posts文件夹，展开后有一个hello-world.md文件，这个文件就是网站上看到的源文件。

熟悉以下几个快捷键以后会很方便

• command+w 关闭当前标签
• command+shift+m 终端
• ctrl+shift+m 预览
• “>” 块引用
• “-” 任务列表
• “0.” 有序列表

再回去翻翻Next模版，设置下站点配置文件和主题配置文件，设置语言和昵称，基本上博客就可以了，保存后在终端输入下面调试命令,如果再此出现Database saved，代表本地站点已经初始化完成，可以在浏览器输入http://localhost:4000/查看你的站点了。

hexo server --debug

3. 部署到 Github 上

把本地文件上传到github远程前，我们需要告诉atom上传到的路径，先登陆github，进入zhaodongchun.github.io这个分支，点击绿色的clone or download按钮拷贝出来路径，再进入atom，左侧根目录会有一个_config.yml文件，下面我们设置下这个配置文件，先把拷贝出来的路径粘贴到url后面，注意截止到/,将root后面改成你的github上的仓库一样，repo后面的直接把你拷贝出来的粘贴就行了，注意:后面的空格不要少，这样atom就知道上传给谁了。

• url: https://github.com/konglongyinger/zhaodongchun.github.io/
• root: /zhaodongchun.github.io
• deploy:
• type: git
• repo: https://github.com/konglongyinger/zhaodongchun.github.io.git

修改完成后保存，在atom终端输入下面命令，在github上查看上传结果，如果发现文件已经显示，就可以进入github你的分支下的settings，往下翻找到GitHub Pages这里，将source下的None改为master branch,点击保存后，会出现绿色的一条提示Your site is published at https://konglongyinger.github.io/zhaodongchun.github.io/，后面链接就是你的网址了，现在你可以点击看看效果。

hexo deploy

4. 调试网站

• 如果每次在本地修改文章，可以用下面命令调试预览

hexo s --debug

• 如果改动了配置文件，在上传到github前最好使用清理命令，清除public目录

hexo clean

• 如果完成阶段性任务了可以用下面命令上传到github

hexo deploy

5. 域名绑定

首先你的有个域名，举例来说我是从百度买的，有了域名后再分三步走。

1） 配置CNAME

在hexo文件夹下的source中新建一个文本文档， 里边输入刚才我们买到的域名的二级域名。举例来说，我申请的是zhaodongchun.com，就填写zhaodongchun.com,然后保存为CNAME.注意大写的CNAME.

2） 配置解析服务器

接下来进域名服务商的后台进行域名解析设置,添加CNAME记录类型，解析线路默认就好了，记录值为zhaodongchun.github.io,配置好后我们本地重新上传到github。

3） 配置站点设置文件重定向

还记得我们没有绑定域名之前设置的配置文件吗，绑定域名后需要重新设置下url和root,否则css有可能会丢失，将其设置回默认，如下设置：

• url: https://zhaodongchun.com
• root: /

4）好，到此为止，重新执行下面命令将文件上传到github，浏览器输入你的域名就可以正常登陆了。

hexo clean
hexo g
hexo d