Fork me on GitHub

Hexo+GitHub博客搭建实战

我的个人博客链接:wangwlj.com

想要搭建类似的博客吗?

如果是,那就赶快点进来吧~~

手把手教学,现在开始!!

说在前面

为什么自己搭建博客,知乎不行吗?
有自己的博客自由,自在。可以看看这篇文章:刘未鹏 | Mind Hacks。更多请看为什么要自建博客?

搭建环境

1、安装 Node.js: https://nodejs.org/en/

windows下点击链接,下载安装即可;Linux下更加简单,在终端下输入sudo apt-get install nodejs即可。

2、安装 Git: https://github.com/waylau/git-for-win

windows下点击上述链接安装即可;Linux在终端输入sudo apt-get install git即可。

详细教程可参考廖雪峰老师的Git教程: https://github.com/waylau/git-for-win。我也写了个Git的简易入门教程,链接:Git入门使用指南

本篇教程中不涉及太多Git的操作,因此无须观看Git相关教程也可轻松完成搭建。

3、安装完成后,在开始菜单里找到“Git”->“Git Bash”,按下图设置,名称和邮箱是Github上的。

Git Bash界面与指令

4、安装Hexo。所有必备的应用程序安装完成后,即可使用 npm安装Hexo

1
$ npm install -g hexo-cli

这一步如果出错,可到文末的“出错汇总”查看解决方法。

至此,本地环境已经搭建完成。

配置Github

首先注册、登录 https://github.com/ ,其中自己的Username很重要(之后的创建仓库以及博客github.io域名会用到)。

然后右上角选择 Create a new repositoryhttps://github.com/new
如下图所示:

githhub创建仓库截图

其中仓库名称Repository name一项填写格式为:yourname.github.io(yourname与你的注册用户名一致,这个就是你博客的域名了)

仓库创建完成后,开始生成添加秘钥。

在终端(Windows:cmd/Linux:Terminal)下输入:

1
ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路Enter过来就好,待秘钥生成完毕,会得到两个文件id_rsaid_rsa.pub,用任意文本编辑器打开id_rsa.pubCtrl + a复制里面的所有内容,然后进入
https://github.com/settings/ssh

githhub输入秘钥

将复制的内容粘贴到Key的输入框,Title的内容可以随意(比如ubuntu home),点击Add SSH key按钮即可。

若没有配置GitHub,就执行第三步(初始化博客),会出现如下错误:

初始化错误

初始化博客

在电脑F盘(自己随意)目录下新建文件夹test,进入test,按住Shift键点击鼠标右键,点击“在此处打开命令窗口”:

右键选择菜单

输入:

1
hexo init blog

稍微等待下,速度有点慢。成功提示:

INFO Start blogging with Hexo!

因为你初始化hexo之后source目录下自带一篇hello world文章, 所以直接执行如下命令:

1
2
3
4
5
6
$ hexo generate
# 启动本地服务器
$ hexo server
# 在浏览器输入 http://localhost:4000/就可以看见网页和模板了
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

在浏览器中输入localhost:4000,便可以看到网站初步的模样。不要激动,我们还要把网页发布到Github上去。

localhost上的网站初步形状

配置博客

blog目录下,用sublime/notepad++等文本编辑器打开_config.yml文件,修改参数信息

特别提醒,在每个参数的:后都需要有一个空格

修改网站相关信息

1
2
3
4
5
6
title: wangwlj的博客
subtitle: 积跬步以至千里!
description: 网页描述
author: wangwlj
language: zh-CN
timezone: Asia/Shanghai

languagetimezone都是有输入规范的,详细可参考 语言规范时区规范

配置部署

代码中的qwerty200696,修改成自己的。

1
2
3
4
deploy:
type: git
repo: https://github.com/qwerty200696/qwerty200696.github.io
branch: master

其中repo项是之前Github上创建好的仓库的地址,可以通过如下图所示的方式得到:

repo地址

branch是项目的分支,我们默认用主分支master

此外,可将_config.yml中的repo修改为如下标准格式:

1
repo: https://用户名:密码@github.com/用户名/用户名.github.io.git

这样做的好处就是每次hexo deploy提交时不需要输入账号密码。

配置统一资源定位符

如果有个人域名的话可以设置,否则跳过即可。如果是github.io的网址,也是可以填上的。

1
url: https://qwerty200696.github.io

对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。

发表文章

1.新建一篇博文,在CMD中输入:

1
2
3
$ hexo new "我的测试文章"
INFO Created: F:\test\blog\source\_posts\我的测试文章.md

2.根据上述提示路径找到该文章,打开,使用Markdown语法编辑文章。

该语法介绍可以查看:Markdown 语法说明 (简体中文版)

在文章的一开始处,可以按如下格式添加文章标题,日期,分类、标签以及描述等。

1
2
3
4
5
6
7
8
9
---
title: title #文章标题
date: 2017-09-08 23:47:44 #文章生成时间
categories: "Hexo教程" #文章分类目录 可以省略
tags: #文章标签 可以省略
- 标签1
- 标签2
description: #你对本页的描述 可以省略
---

3.接着在blog目录下,输入如下的一系列(三个)命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
F:\test\blog
$ hexo clean
INFO Deleted database.
INFO Deleted public folder.
$ hexo generate
INFO Start processing
INFO Files loaded in 1.48 s
#省略
INFO 29 files generated in 4.27 s
$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

打开http://localhost:4000/,可以在本地预览网站的初步样子。

最后一步,发布到远程,执行hexo deploy

1
2
3
4
5
6
F:\test\blog
$ hexo deploy
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
#省略

执行hexo deploy时如果出现错误,请到文末查看具体解决方案。

正常情况下,会跳出Github登录,直接登录;如果没有问题,在浏览器输入博客地址: qwerty200696.github.io

然后就可以看到已经有内容了。(有可能稍有延迟)

总结

发布文章的步骤:

1、hexo new 创建文章(当然也可以通过其他方式创建Markdown文件)

2、Markdown语法编辑文章

3、部署(所有打开CMD都是在blog目录下)

1
2
3
4
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo generate #生成
hexo server #启动服务预览,非必要,可本地浏览网页
hexo deploy #部署发布

其中的部分命令可以简写:

  1. hexo n “我的博客” == hexo new “我的博客” #新建文章

  2. hexo g == hexo generate # 生成

  3. hexo s == hexo server # 启动服务预览

  4. hexo d == hexo deploy # 部署

到此为止,相信你已经对博客的整体流程有了一定的把握,想要对博客进一步优化吗?

请进入博客优化篇:hexo搭建的Github博客之优化

出错汇总

安装hexo时出错

unable to verify the first certificate(无法验证第一证书)

安装hexo出错截图

查找到解决方案:

解决方案截图-推荐方案一

参考网址:npm报错

依据解决方案所述,在命令行输入如下命令,来取消ssl验证:

1
npm config set strict-ssl false

之后安装就会成功了,显示如下:

hexo安装成功

hexo deploy出错之一

1
deploy not found: git

deploy not found: git

解决方案:执行如下语句后, 再部署即可:

1
npm install hexo-deployer-git --save

参考自:https://www.v2ex.com/t/175940

错误一修正

hexo deploy出错之二

安装完成之后的第x天,同步文章到github时,即运行如下命令:

1
hexo deploy

居然出现了如下的错误:

1
2
3
4
5
6
7
8
9
10
fatal: unable to access 'https://username:password@github.com/username/username.github.io.git/': SSL certificate problem: unable to get local issuer certificate
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: unable to access 'https://username:password@github.com/username/username.github.io.git/': SSL certificate problem: unable to get local issuer certificate
at ChildProcess.<anonymous> (D:\test\blog2\node_modules\hexo-util\lib\spawn.js:37:17)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at ChildProcess.cp.emit (D:\test\blog2\node_modules\cross-spawn\lib\enoent.js:40:29)
at maybeClose (internal/child_process.js:920:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)

SSL错误

解决方法:执行如下语句:

1
$ git config --global http.sslVerify false

参考自:git获取代码提示SSL certificate problem: unable to get local issuer certificate

参考自: hexo提交报错 unable to access

之后再次运行发布指令,终于成功:

1
hexo deploy

SSL错误解决

参考文献

  1. 教你免费搭建个人博客,Hexo&Github
  2. hexo生成博文插入图片
------ 本文结束感谢您的阅读 ------
坚持原创技术分享,您的支持将鼓励我继续创作!