0%

利用hexo + github 搭建个人博客

写在前面

这则笔记主要描述如何利用hexo + github 搭建个人博客。主要包括以下几个方面:

  • 博客搭建

  • 博客更新

  • 图床设置

  • 自定义域名

  • 博客优化

  • 博客迁移

注:2019年12月24日,更新图床和域名设置相关内容。

博客搭建

前提准备:

  1. 了解掌握git基本操作;

  2. 了解掌握markdown语法;

  3. 有一颗喜欢折腾的大心脏;

第一步:新建github账户

  • 新建github账户

  • 生成SSH密钥

1
2
3
4
5
ssh-keygen -t rsa -C xxx@xxx.com  //此邮箱为github注册邮箱

//之后一路下一步,会得到两个id_rsa和id_rsa.pub两个文件;
//其中id_rsa是私钥,自己保管好;
//id_rsa.pub是公钥,使用cat命令查看一下内容,复制出来,下面会用到。
  • 打开github设置页面,点击New SSH key,然后粘贴id_rsa.pub内容,然后点击Add SSH key。

第三步:新建github.io

  • 新建一个repo

  • 克隆repo到本地
1
git clone https://github.com/username/username.github.io  [localDir]
  • 新建index.html
1
2
cd username.github.io
echo "Hello World" > index.html
  • push到github仓库
1
2
3
4
5
git add --all

git commit -m "Initial commit"

git push -u origin master
  • 访问测试:
1
2
//浏览器输入,username是github注册用户名
https://username.github.io.

第三步:本地安装HEXO

  • 安装node.js,下载地址,直接安装最新版即可。

  • 命令行安装hexo

1
npm install -g hexo
  • 新建一个blog文件夹,然后通过终端进入该文件夹
1
2
//进入刚刚git.io本地文件夹
cd [dir]
  • 执行以下命令:
1
hexo init
  • 安装依赖包
1
npm install

第四步:设置HEXO

  • 在hexo文件夹内找到_config.yml配置文件,sublime打开编辑:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# Hexo Configuration  
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站点信息设置
title: #站名
subtitle: #副标题
description: #站描述
author: #作者
language: zh-CN #语言
timezone:

# URL 链接设置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://blog.prozin.xyz
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory 文件目录
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing 文章
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format 日期
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 分页
## Set per_page to 0 to disable pagination
per_page: 20
pagination_dir: page

# Extensions 扩展
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape #默认主题

# Deployment 这里设置了Github
#这里一定要注意不要写错了,否则部署到Github上会出问题
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: 仓库地址.git
branch: master
message: '站点更新:{{now("YYYY-MM-DD HH/mm/ss")}}'

注意事项:

  1. 配置文件的冒号:后面有一个空格;

  2. repo: 就是github地址.git ,这里的.git一定不能忘。

  • 部署.deploy目录
1
npm install hexo-deployer-git --save

第五步:更改主题为NEXT

具体参见说明文档 内容详细到令人发指,step by step就好了。另外一些附加功能,在后面博客美容的部分。

博客更新

hexo 常用命令行

序号 命令 含义
1 hexo help #查看帮助
2 hexo init #初始化一个目录
3 hexo new “postName” #新建文章
4 hexo new page “pageName” #新建页面
5 hexo generate #生成网页,可以在 public 目录查看整个网站的文件
6 hexo server #本地预览,’Ctrl+C’关闭
7 hexo deploy #部署.deploy目录
8 hexo clean #清除缓存

注:强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹

发布更新步骤:

  • 新建文档
1
hexo new "标题"
  • 编辑文章

刚刚生成的文档在在sourse/ _posts文件夹下生,默认是 .md文件,推荐使用Mweb进行编辑。

  • 发布文章
1
2
3
hexo clean
hexo generate
hexo deploy

出现以下提示,说明部署成功,等几分钟刷新页面就能看到了。

1
[info] Deploy done: git

图床配置

之前采用的是ipic + flickr 的方案,一年多没有折腾博客,回来发现 ipic 订阅要重新充值,flickr 已经廉颇老矣,只能重新折腾,这会选择的方案是 upic + github,将开源进行到底。

获取 github token

step 1 :进入Github Token 创建页面

step 2 :勾选 repo 访问权限。然后滚动页面到底部,点击Generate token按钮来生成 token

step 3 :复制生成好的 Token 值到 uPic token 输入框

注:牢记 token,此文件只显示一次。

upic 设置

设置界面如下:

upic setting

配置项说明:

用户名: Github 用户名

仓库名: 需要储存上传文件的仓库名称

分支: 分支名称,默认是master

Token: 刚才创建的token

域名: 默认可不设置域名,会使用 Github 默认的访问地址。当你的仓库开启了pages功能,并配置好了自定义域名时,这里就可以使用你的自定义域名

CDN加速:使用默认 CDN 加速访问:

保存路径: 文件储存的路径(包括文件夹)。 支持 {year} {month} {day} {hour} {minute} {second} {since_second} {since_millisecond} {random} {filename} {.suffix} 等变量。

自定义域名

域名绑定

注:2019年12月更新:之前采用的是万网域名+Cloudflare 云解析,万网域名过期没有续费已经用不了了;索性国内域名购买、备案的各种狗血,索性从namecheap再买一个,重新走起。

step 1 :购买域名

Namecheap注册账户,实名认证,购买域名,一路按照流程走就OK了。

step 2: 域名设置解析

  1. 登陆Namecheap,点击控制面板 => Domain List => 对应域名的Manage按钮

    namecheap setting

  2. 如下图所示界面,往下拉,删除URL Redirect Record整条记录

DNS setting

  1. 点击 Advnaed DNS,新增一条A Record

Advanced DNS

如图所示,CNAME需要改动两处:

  • 主机记录,写 “www”

  • 记录值,就是github.io的ip地址。获取这个ip值,可以直接打开终端通过ping命令获取。

注:还可以添加一条A记录,获取github.io的ip地址,可以通过在终端输入以下命令:

1
dig WWW.EXAMPLE.github.io +nostats +nocomments +nocmd

step3. 配置github

在本地hexo文件根目录下找到source,进入这个目录后创建文件名为 CNAME 的文件,打开之后编辑文件写入刚买来的域名。

1
2
3
4
5
6
7
8
终端输入:
cd /Users/steveyuan/documents/github-file/steveBlog/source #这里是文件路径,需要根据实际情况进行调整

touch CNAME #该文件不写后缀

之后双击打开文档进行编辑,输入域名,保存

www.steveyuan.work #这里是自己的域名

step 4: github设置解析

  1. 进入自己的github.io 的Repository,点击 Create new file,创建一个文件,名字还是叫 CNAME 。

  2. 编辑CHAME 文件,内容还是域名,不过不包括 http://www,点击保存。

  3. 进入本地hexo文件夹,重新生成、部署网站。

添加https

注:2019年12月更新,启用github pages 的https。

打开GitHub仓库的settings,在custom domain 中填上刚申请的域名(如果是用namecheap的域名,GitHub Pages会自动填充域名),勾选enforce https,使能https支持.

博客优化

fork me on github

  • 打开themes/next/layout/_layout.swig文件,把代码复制到<div class="headband"></div>下面。

静态网页压缩

  • 在站点的根目录下执行以下命令:
1
2
3
$ npm install --global gulp-cli   //全局安装
$ npm install --save-dev gulp //npm install --save-dev gulp
$ touch gulpfile.js //新建 gulpfile.js

注:gulp.js 官方使用说明

  • 采用atom 打开gulpfile.js,复制粘贴以下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
'minify-html','minify-css','minify-js'
]);
  • 更新推送
1
2
3
hexo g
gulp
hexo d

增加字数统计

利用统计功能,显示文章字数统计,阅读时长,总字数

  • 在站点的根目录下,输入命令:
1
$ npm i --save hexo-wordcount
  • 打开 themes/next/_config.yml,搜索关键字 post_wordcount
1
2
3
4
5
6
7
8
9
10
11
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
#字数统计
wordcount: true
#预览时间
min2read: true
#总字数,显示在页面底部
totalcount: true
separated_meta: true

实现动态背景

这个比较酷炫,但是实现方法是最简单的,因为next V5.1.1主题自带,大牛已经写好了只要在设置文件中开启即可。

在站点目录,找到next主题文件夹,路径是themes/next/_config.yml,搜索找到canvas_nest: false,把它改为canvas_nest: true ,齐活。

云端保存博客内容

hexo更新博客的流程大概是:

  1. hexo g 将本地md文件生成静态网页;

  2. hexo d 将优化后的静态网页推送到git.io

由于上述过程都是在本地电脑进行的,因此原始的md文件,也就保存在本地机器上,如果需要更换电脑的话,就需要自行拷贝文件,重新配置环境,这样以来就很不方便。

网上查了资料,有人说可以通过分支branch,master用来存放生成后的静态网页,source用来存储源文件。听起来确实是个很好的办法,但是还是那句话,本人是菜鸟,又怕搞不好把博客挂掉了,所以迟迟没有动手。

在网上找资料,查到一个很好的方法,而且使用简单,连我这样的菜鸟也能很容易配置成功。

该方法借助hexo-deployer-git插件完成,GitHub地址:https://github.com/hexojs/hexo-deployer-git

  • 安装插件
1
npm install hexo-deployer-git --save
  • 登陆新建branch分支

最便捷的方法是登陆GitHub网站,进入github.io的repo,系统默认有一个master的分支,再新建一个source就OK,当然此处的名字随你喜欢,取什么都行。

也可以在本地命令行操作,先cd进入github.io目录

1
2
3
4
5
6
7
8
//新建一个名为source的branch
git branch source

//进入该分支
git checkout source

//上述两步还可以合并为一行
git checkout -b source
  • 修改hexo配置文件

注意:修改的是hexo文件夹根目录下的_config.yml,只需修改其中deploy那部分,示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
deploy:
- type: git
//这个repo地址是github.io的默认地址,如果你已经配置过了,这里是不需要更改的。
repo: git@github.com:<username>/<username>.github.io.git
branch: master
- type: git
//跟上面的repo地址保持一致
repo: git@github.com:<username>/<username>.github.io.git
//这里写的是需要保持的branch分支名
branch: source
//这个是需要同步的文件夹路径,/表示从hexo博客根目录下的所有文件都同步
extend_dirs: /
ignore_hidden: false
ignore_pattern:
public: .

基本上就是这样,设置完成保存,就可以在更新博客的同时,同步保存网站md文件。

TroubleShooting:icon无法显示

具体是这样的:

按照说明文档isuues提示的操作方法,在fontawesome找到相应的图片名称,但是显示结果很预期的不一样。

实际显示效果是这样的(如图),只有facebook正常,其他三个图标都不对,不知道为什么。

问题分析解决

你说怪不怪,为啥只有FB的icon正确显示,其他的不见踪迹呢?难道我只有在Facebook比较受欢迎,其他的都不受待见?

试着更换了别的图标,还是不对!

神马情况?直到我看到了这句话:

示例代码:

看到这里,突然有一种想抽自己的冲动。原来答案一直就杵在眼前,而我却一直视而不见,还花了三天的时间各种查资料!

当然,这个social_icons: 也很有迷惑性,之前总在这里改来改去,其实该修改的在前面social目录下就已经修改完了,这里只要保持光溜溜就好。

博客迁移

前提准备

1
npm install hexo-cli -g

troubleShooting
前期准备部分就遭遇trouble到关键原因,当然还是自己太菜了。

这里有个坑,第一次在安装node.js的时候,装的是8.9.4LTS版本,本身没问题,但在安装hexo的时候遇到了错误提示:
err
大概就是说权限不够,google了一翻,在stack overflow上找到了答案,具体见网址

简单说就是要授权,按照网页的提示,在终端中输入:

1
sudo chown -R $USER /usr/local/lib/node_modules

迁移blog

拷贝文件

这里只需要拷贝以下5个文件/文件夹,其他的文件不用拷,直接忽略即可。

  • config.yml
  • theme
  • scaffolds #文章模板
  • package.json #说明使用哪些包
  • source

安装模块

1
2
cd blog-directory    //  进入blog文件夹 
npm install //安装模块

安装其他组件

1
2
3
4
5
6
7
npm install hexo-deployer-git --save //同步内容至github

npm install hexo -server --save //server

npm install hexo-generator-feed --save //RSS订阅

npm install hexo-generator-sitemap --save //站点地图

之后,正常情况下应该就可以部署更新blog了。

1
2
3
hexo clean
hexo generate //可简写为 hexo g
hexo deploy //可简写为 hexo d

troubleShooting
这里也遇到了一个坑,前面配置都没问题,最后在运行 hexo d 的时候,遇到了错误提示:

1
2
3
4
5
6
7
8
9
10
11
12
fatal: unable to access 'https://github.com/steve-yuan-8276/steve-yuan-8276.github.io.git/': Failed to connect to github.com port 443: Operation timed out
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: unable to access 'https://github.com/steve-yuan-8276/steve-yuan-8276.github.io.git/': Failed to connect to github.com port 443: Operation timed out

at ChildProcess.<anonymous> (/Users/steveyuan/Documents/github-file/steveBlog/node_modules/hexo-util/lib/spawn.js:37:17)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Socket.stream.socket.on (internal/child_process.js:346:11)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at Pipe._handle.close [as _onclose] (net.js:554:12)

解决方法:尝试了很久,最终发现还是网络环境问题,单位网络不行,换到家里的网络就OK了。

-------------本文结束感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!