PENGLLRN | 有时低头看路，有时仰望星空
2019-01-03 | 教程系列 | UNLOCK

快速搭建一个属于自己的博客

阅读须知

本文属于基础教程系列，教程系列的特点请参看：教程须知

阅读基础

本文适合有一定编程基础的人，在这之前如果有了解过git、github以及markdown方面的知识就更好了，不过不了解也没关系，因为只有刚开始搭建的时候需要用到。在后续写博文的时候，只需学习以下markdown的语法即可。

注意事项

由于本文设计到的基础比较多，遇到您熟悉的内容尽管跳过。

正文

Hexo是什么

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo常用命令：

1
2
3
4
hexo init #初始化一个博客项目
hexo g #生成网页静态文件，在写完一篇文章或者修改了配置文件时候需要使用
hexo s #启动本地服务器，速览效果
hexo d #部署

软件环境搭建

（1）安装Git

博客文章部署的时候需要通过git的方式进行静态代码文件的托管。
git是什么（了解）？手把手教你使用Git
git下载： 下载地址
git安装：双击exe文件，一直next即可

git在使用之前需要配置，配置的方法上面那篇文章也有。

（2）安装Node.js

Hexo是基于nodeJS环境的静态博客，所以需要先安装nodeJS环境
下载Node.js： 下载地址 （ 说明：LTS为长期支持版，Current为当前最新版，推荐LTS）
安装步骤：下载好msi文件后，打开安装，在Custom Setup这一步记得选Add to PATH ，这样你就不用自己去配置电脑上环境变量了。在Git Bash 或者cmd里面输入命令：node -v可查看版本。

(3)安装Hexo

利用Git bash 工具（右键），安装hexo：

1
2
npm install -g hexo #安装hexo
npm install hexo-deployer-git --save #安装hexo部署工具

Hexo使用

常用命令

1
2
3
4
hexo init #初始化一个博客项目
hexo g #生成网页静态文件，在写完一篇文章或者修改了配置文件时候需要使用
hexo s #启动本地服务器，速览效果。在浏览器输入localhost:4000即可访问。
hexo d #部署

目录详解

使用hexo init 初始化一个博客项目会生成许多文件，如果您对这些文件感兴趣，或者想修改源代码以实现某些功能，那么请入相应的文件中进行修改。

1
2
3
4
5
6
7
8
node_modules：是依赖包
public：存放的是生成的页面
scaffolds：命令生成文章等的模板
source：用命令创建的各种文章
themes：主题
_config.yml：整个博客的配置
db.json：source解析所得到的
package.json：项目所需模块项目的配置信息

配置文件

配置文件是hexo框架的重点，一般来说有两个，一个是全局的配置文件，在博客根目录的：_config.yml。

另一个是主题的配置文件，在/theme/主题/ _config.yml里面。

全局配置管理的是一些全局信息，比如网站名，部署设置等；而主题里面的配置文件侧重于单个主题而言，不同的主题有自己的配置项。

主题

Hexo的默认主题是landscape，这个主题简介清爽，没有太多花里胡哨的东西。如果您想追求更美的主题，可以到Hexo主题列表中尽情挑选。基本上每篇主题都有详细的安装和配置教程，这里就不介绍了。吃水不忘挖井人，本站所使用的主题的为：AD，在此由衷的感谢作者，我真的非常喜欢这款主题，为尊重原创作者，本站将会在站底一直展示主题的出处。

编写文章

使用hexo new "passage_name"命令新建一篇文章，如果会看到控制台输出一个相应的.md文件以及存放的路径，一般存放在/source/_post/中，然后只需要找到它，然后编写内容即可。

文章写好之后需要hexo g生成静态文件，否则看不到任何效果。

一般还可以使用如下命令生成tags，categories，about等页面，这需要结合具体的主题来使用：

1
2
3
hexo new page "tags"
hexo new page "categories"
hexo new page "about"

文章编写使用的是markdown语法，如果不了解的话，可以百度以下。markdown中不仅支持文字以及图片，还支持代码以及数学公式，可以说非常的强大了。

markdown编辑器推荐：Typora.

插入图片

markdown有插入图片的语法，相信您一看就会了，但是图片的链接该如果处理呢？在这里我提供几种方式：

  1. 放入在博客中，在public里面新建一个image目录，用于存放所有图片。这样在markdown写的时候就需要使用相对路径了，比如说我在public里面新建了一个路径image/deployhexotogithub/路径，接着我要插入里面的node-v.jpg这张图片，那么在插入图片的时候就需要写成：

    1
    ![node-v](/images/deployhexotogithub/node-v.jpg)

    这种方式随着博文越写越多，讲变得十分的臃肿。

  2. 使用markdown Pad2 这款markdown自带的图片上传工具，如图所示：
    1552368827967
    1552368827967

点击上传之后，会将选择的图片上传到imgur.com服务器，然后点击OK会给您这种图片的markdown访问链接。经过亲测，这样上传的图片访问速度还比较快，但保存时间不知道有没有期限，不过我保存了半年照样还能访问。

  1. 自己注册一个云存储空间，比如阿里云存储OSS，七牛云的对象存储等，等有一定的免费存储空间。将图片上传到上面并使用其给的链接就可以访问了，这种方式比较的麻烦但是很可靠，不用担心您的图片会突然丢失。并且七牛云有10G的免费空间，如果您的博客图片不多，完全可以存放几千篇博文！

在这里推荐一个七牛云的图片上传工具：Mpic，可以快速上传图片到七牛云。

Hexo部署

前面一直没有讲部署，那么您的博客在hexo d的时候将会失败，或者您只能运行hexo s之后在本地访问，那么接下来讲解如何部署。如果之前有使用过GitHub之类的代码托管平台，将会十分容易理解。

使用托管平台部署

托管平台注册以及新建仓库

常见的托管平台有GitHub与Coding，基于它们搭建Hexo博客的方式都是一样的，首先您需要有一个账号，如果没有的话就去注册一个，比如到Github官网注册账号。

注册完之后需要新建一个仓库来存放博客的静态文件，仓库名需要与您的GitHub或者Coding账号名字一致。

获得SSH公钥

接着在Git Bash中输入：ssh-keygen -t rsa -C "YourEmai，生成ssh。然后按下图的方式找到id_rsa.pub文件的内容。

1
2
cd ~/.ssh
cat id_rsa.pub

1552370254726

将红色区域复制下来（建议保存到一个txt文本中）。

然后在GitHub网站中把这个公钥添加进去，这样本地电脑连接github进行上传的时候，就不用输入密码了。点击Setting，找到：

1552370434647

配置hexo的deploy

进入存放hexo博客的文件夹，找到_config.yml文件，在最后配置deploy值：

1
2
3
4
5
6
7
deploy:
  type: git
  repo: 
       pengllrn.xyz: root@47.106.179.33:/root/gitrepo/blog.git,
       coding: https://git.coding.net/pengllrn/pengllrn.git,
       github: https://github.com/pengllrn/pengllrn.github.io.git,
  branch: master

这里我配置了三个，分别是个人服务器，coding以及github。分支都选择的是master。

部署上传

接着使用hexo d即可部署上传，上传成功在浏览器输入：

1
2
3
https://xxx.github.io
或者
https://xxx.coding.me

即可访问，如果部署了到了自己的服务器，还可以通过自己的域名访问。

Hexo 博客

评论加载中