欢迎 来到 我 王国聪的博客!
前言
- 周末用了不到一天时间搭建了属于自己的博客，欣喜之余，就将个人博客搭建的详细过程记录下来，分享给大家使用；
- 搭建之前，笔者看过其他博客的搭建教程，上面都提到可以在短短几分钟搭建好自己的博客。
- 从搭建到博客访问确实只需要几分钟的时间，但几分钟的工作并未达到我们的预期，需要优化的时间可不止几分钟。遗憾的是，那些教程并没有将博客优化过程可能遇到的坑提及出来。因此，本文有必要补充一下。
我这次搭建的博客是个人博客，因为服务器的选择以及便捷，所以我选择的是：GitHubPages + Hexo+Next
当然有很多实现方式：如：WordPress、GitHubPages + Jekell等等。
第一步：
创建Github仓库
在浏览器输入Github网址;
登录或者注册；
点击下图所示的 New repository
:
填写仓库名称：Respository name 中：xxx.github.io,然后点击”Create repository“ 按钮完成创建即可。(我尝试过在这填写过：不是用户名.github.io,最终的后果是显示404页面，建议使用:用户名.github.io)
具体如下图所示：
本地环境的准备工作
Git安装和Nodejs安装
在这就先完成了github的工作，然后安装Git以及Nodejs （Nodejs也可使用Nodejs版本管理器nvm安装，考虑其安装过程中存在的问题较多，操作流程也多，我不推荐大家使用这种方式安装。此处就不列举其安装方式）
Hexo安装
打开Git Cmd终端，输入Hexo的安装命令：
1 | npm install hexo-cli -g |
若此命令安装不成功时，可输入下面的命令和开机密码继续完成安装：
1 | sudo npm install hexo-cli -g |
安装完成后，就定位到你希望存储博客的目录下，如图：
执行Hexo命令，初始化本地博客仓库：
1 | hexo init xxx.github.io // 尽量和Github仓库使用同一个名称(避免一些意料之外的错误) |
博客效果预览
- 上述步骤完成后，基本的博客框架就已经搭建完了，Hexo安装完成后默认使用landscape主题；
- 在终端定位到xxx.github.io文件夹下，并在终端输入下面的命令就能启动服务预览功能；
1 | hero s |
在浏览器上输入网址：http://localhost:4000/，就能预览到landscape主题下的博客效果，具体如图:
这个主题是默认的主题你觉得很好的话就继续使用，我是用的是next主题，这里说下安装主题的方式：
一: 定位到对应博客的位置
二： 安装对应的主题（还有很多的好看的主题，可自行挑选，网址如下：https://hexo.io/themes/）
1 | cd xxx.github.io |
然后就是我们的博客配置了：
注意说明下:有两个配置文件，一是站点配置文件（博客工程的主目录下），一个是主题配置文件（博客的themes目录下的对应主题目录下）
站点配置文件：打开之前的xxx.github.io文件夹，找到_config.yml即为站点配置文件，选中该文件->右击->打开方式->文本编辑（也可以选择Sublime打开），打开后就可以修改基本的博客配置了；（注意一下：在配置文件里‘#’就是注释符，相当于C语言中的‘//’）
这里附录我的config.yml,有魔改部分,请酌情参考
1 | # Hexo Configuration |
- 配置好站点配置文件，就可以预览一下博客的效果了，流程与前面的相同，即在终端定位到xxx.github.io文件夹，执行hexo s命令。
1 | cd xxx.github.io |
博客的Next主题配置
- 主题配置文件：需要与之前讲过的站点配置文件进行区分，站点配置文件在xxx.github.io/_config.yml目录；主题配置文件在xxx.github.io/themes/next/_config.yml目录下；
- 关于主题可配置的选项略多，故采取分条讲解的形式，具体如下：
1、设置关键字
1 | # Set default keywords (Use a comma to separate) |
2、设置博客的开始时间
1 | # Specify the date when the site was setup |
3、菜单栏的设置
1 | # ------------------------------------------------ --------------- |
4、菜单栏的图标设置：可从Font Awesome 网站查询图标对应的名称填入到对应的菜单项即可
1 | #设置菜单的图标，规则为：菜单（左）：图标名（右） |
5、设置博客的外观
1 | # Schemes |
6、设置社交链接（设置了Github、微博）
1 | # Social Links |
7、设置侧栏的头像
1 | # Sidebar Avatar |
- 注意一点使用next主题时，侧栏头像只能存储在主题目录下images文件夹里
8、设置侧栏的方向（设置成左侧）
1 | sidebar: |
9、设置博客中代码高亮显示
1 | # Code Highlight theme |
10、设置微信支付宝赞赏功能
1 | # 打赏配置 |
创建分类界面
打开终端，定位到xxx.github.io目录下；
执行下面的命令，新建一个名为categories的页面；
1
hexo new page categories
创建完成后，在对应的目录下找到index.md文件，进行如下的修改：
1
2
3
4
5
6---
title: categories
date: 2019-02-25 22:17:49
type: "categories" # 将页面的类型设置为 categories,主题将自动为这个页面显示所有分类
comments: false
---
创建标签界面
- 打开终端，定位到xxx.github.io目录下；
- 执行下面的命令，新建一个名为tags的页面；
1 | hexo new page tags |
创建完成后，在对应的目录下找到index.md文件，进行如下的修改：
1
2
3
4
5
6---
title: tags
date: 2019-02-25 22:17:49
type: "tags" # 将页面的类型设置为 tags,主题将自动为这个页面显示为标签云
comments: false
---上述创建的分类和标签界面是主题自动维护的，用户只需要按照规则书写文章即可。
到这里，基本完成了简单的博客创建，再说下怎么创建和发布博客：
如何写和发布博客
主要使用的Markdown语法写文章，推荐Mac上使用Mou编辑软件，windows上使用Typora编辑软件，都可带查看其语法帮助；
在文章开头需要添加一些配置，如下：
1
2
3
4
5
6
7
8
9---
title: 个人博客搭建详解（Windows和Mac通用版） # 这是标题
categories: # 这里写的分类会自动汇集到 categories 页面上，分类可以多级
- 博客站教程
- 个人博客书写
tags: # 这里写的标签会自动汇集到 tags 页面上
- 专业
- 自由
---添加好上述配置后，就可以安心写文章了。最后，将写好的文章放到xxx.github.io/source/_post目录下；
然后，就可在本地进行测试。
在终端上定位到xxx.github.io目录下，执行 hexo s命令，后在浏览器输入http://localhost:4000/即可看到博客的效果。
- 可在终端输入下面的命令完成安装自动部署发布工具：
1 | sudo npm install hexo-deployer-git --save |
当在本地确认博客效果后，就可以将md文件生成静态网页上传至GithubPages，在终端定位到xxx.github.io目录下，执行下面的命令即可：
hexo clean #清楚网页缓存
hexo g #生成静态网页
hexo d #开始部署
//当然也可以使用一次性命令：
hexo clean && hexo g && hexo d
注意：首次部署时，终端会让你输入Github的用户名和密码（输入密码的时候是不显示出来的，所以盲打，输入，点击回车确定就行），按照要求填写后，稍等几分钟，就可以完后部署。
最后一步
- 在浏览器上输入http://xxx.github.io就可以看到属于你的博客了。是不是很激动，那就赶紧行动吧！
后记：
这只是初级的创建hexo博客，还有很多的进阶，这里我附录下我看到的有用的教程，以及有些hexo错误的解决办法：
*错误解决方案**：
教程：
Hexo博客中插入音乐/视频/:
https://www.jianshu.com/p/26a7fc7cc185
hexo中完美插入本地图片：
用Live2D让看板喵入住你的Hexo博客吧(^o^)/~：
https://11.tt/posts/2018/how-to-play-with-live2d-on-hexo/
使用Valine.js评论系统让游客们到你的Hexo博客留个脚印吧：
https://11.tt/posts/2018/add-valine-to-your-blog/
