Hexo+Github搭建博客

以下内容仅供自己学习记录。

前言

最近我终于实现了自己很久之前关于搭建自己专属的博客网站的目标，现在把搭建期间的过程和走过的坑记录下来，如果你对搭建自己的网站有兴趣，不妨可以参考一下我的文章。

一、环境搭建

1.安装Node.js: Node.js安装包下载地址，安装时一直点next即可。
2.安装Git: Git安装包下载地址,安装时一直点next即可。
3.安装Hexo:键入命令
npm install -g hexo-cli
至此Hexo的环境就搭建好了。

二、初始化项目

1.初始化项目

hexo init myblog
cd myblog
npm install

2.初始化之后目录：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml：网站的配置信息.。
package.json：应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，可以自由移除。
scaffolds：模版文件夹。当新建文章时，Hexo 会根据 scaffold 来建立文件。Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。
source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
themes：主题 文件夹。Hexo 会根据主题来生成静态页面。

2.本地开启调试服务

hexo s

然后打开浏览器访问http://localhost:4000即可

3.写一篇文章

hexo new "welcome-to-myblog" //引号里面是文章名

用sublime打开项目找到对应的文章编辑即可。
回到控制台，清理缓存hexo clean，hexo g
再次开启服务 hexo s ，成功后在浏览器访问。

三、搭建自己喜欢的blog

1.换主题

换不同的主题可以去网上找，这里我以archer为例，默认的是landscape。地址
参考该地址安装，在Hexo目录下执行，执行完会发现themes目录多了archer文件夹。

npm i hexo-generator-json-content --save && npm i --save hexo-wordcount && git clone https://github.com/fi3ework/hexo-theme-archer.git themes/archer --depth=1

修改Hexo目录下的 _config.yml 的 theme 字段为 archer

theme: archer

添加sidebar启用支持：

在Hexo目录下的 _config.yml 中添加以下字段（不是archer下的 _config.yml）

jsonContent:
  meta: true
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: true
    excerpt: false
    categories: true
    tags: true

其他字段参考上述链接进行修改。
之后修改themes里的_config.yml，根据自己的实际情况修改图片、站点名称、联系方式等信息。若不需要版权信息，将true改为false即可。
修改完可以进行本地测试一下了。
在控制台依次输入

hexo clean
hexo g
hexo s

2.文章标签和目录

点开上张图片左上角的箭头
此时文章的标签和目录都是空的。
先去控制台新建一篇文章，参考三、初始化项目里的写文章，
发现有tags,但是没有categories，找到图中目录加上最后一行即可。改完之后运行三条命令：hexo clean、hexo g、hexo
改完之后保存，再新建一篇文章，发现多了categories

测试一下成功没，执行

 hexo clean
 hexo g
 hexo s

写文章参考markdown语法进行写作。

3.加本地图片

写博客当然要图片啦，此处没有采用图床，听说图床不够稳定，所以采用本地图片。
1）将主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true；
2）在hexo目录下执行

npm install hexo-asset-image --save

这是下载安装一个可以上传本地图片的插件。

3）再运行hexo n "xxxx"来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹。
4 最后在xxxx.md中想引入图片时，先把图片复制到xxxx这个文件夹中，然后只需要在xxxx.md中按照markdown的格式引入图片：

![你想输入的替代文字](xxxx/图片名.jpg)

注意： xxxx是这个md文件的名字，也是同名文件夹的名字。只需要有文件夹名字即可，不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了，很像引用相对路径。

4） 最后检查一下，hexo g生成页面后，进入public\2019\02\26\index.html文件中查看相关字段，可以发现，html标签内的语句是<img src="2019/02/26/xxxx/图片名.jpg">，而不是<img src="xxxx/图片名.jpg>。
其实直接在本地source中建立imges文件夹(图片放在/source/images即可)
<img src="img/图片名.jpg>
这个比较方便，我就是使用的这种。

四.部署到github

本地测试没有问题之后，就可以部署到github了。

1.注册github并创建仓库

注册很简单，有问题可以找度娘。
创建仓库

直接在桌面右键选择git bash here
在命令行中输入下面命令
ssh-keygen -t rsa -C “你的邮箱地址”
然后回车，要输入密码。
Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com

当你看到上面这段代码的时候，那就说明，你的 SSH key 已经创建成功，你只需要添加到github的SSH key上就可以了。windows打开C:\Users\用户名（电脑设置的账户）.ssh下面的id_rsa.pub,然后复制里面的所有内容.
找到settings,点击SSH，然后new一个
Title根据需要自己填，KEY填入复制的内容。

2.部署到github

修改博客的_config.yml,repo填入你自己的链接
在命令行找到网站根目录，执行 hexo clean hexo g hexo d
然后发现仓库中就是你的博客了，浏览器访问https://你的github账户名.github.io

五.绑定自己的域名

我是在阿里云买的域名，域名备案是一个有点漫长的过程，
需要创建一个CNAME文件，里面直接输入域名即可，放在博客根目录即可。
还有一个就是要去进行域名解析，记录类型选择CNAME。
然后再部署到github，这样就可以直接用域名访问了。
po一个我自己的地址