写在前面

这篇文章主要讲解搭建博客,以下是本文的前提或默认条件:

  1. 读者没有任何搭建博客相关经验
  2. 读者使用MacOS操作系统

对于linux与windows的读者,我会尽力给出对应的解决方案

  1. 读者有服务器部署相关经验,或者是已经有了自己的服务器

如果你没有自己的服务器,你看了文章后也会有一个只能在本地运行的博客。服务器部署相关内容很容易就可以学会。

如果读者具备自己的服务器,那我们同样默认你已经安装了phpapache环境。这个环境要求不重要,它只与8.php+github实现自动部署有关。

  1. 读者会使用命令行

这个是必要条件,如果还没有接受命令行的这种使用方式,建议先进行相关学习,再来进行尝试搭建博客。如果读者会使用命令行,那我希望你会使用iterm2 + oh-my-zsh来进行接下来的内容。

今天的文章包含:

  1. 安装node.js
  2. 安装hexo-cli
  3. 生成博客
  4. 配置hexo站点信息和主题
  5. 第一次部署到服务器
  6. php+github实现自动部署

正文

安装node.js

node.js是一个使用JavaScript进行编程的后端语言,安装node.js的同时会附带node的包管理工具npm。我们需要使用npm来安装相关需要的程序,所以安装node.js是必经之路。

我们前往node.js官网,下载对应系统的安装包,下载完毕后进行安装。

安装成功后打开终端,输入

1
2
➜  ~ npm -v
6.9.0

我们可以看到当前的npm版本号,这说明已经安装成功了。

安装hexo-cli

hexo是一个博客系统,这里是它的官网。它借助npm的功能来构建一个静态的博客系统,用户只需要掌握npm相关的原理,即可搭建一个个人博客。hexo-clihexo的命令行工具,有了它就可以在命令行操作博客。

首先我们使用npm来安装hexo-cli

1
➜  ~ npm install hexo-cli

提示成功后,我们使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
➜  ~ hexo -v
hexo-cli: 2.0.0
os: Darwin 18.6.0 darwin x64
node: 12.5.0
v8: 7.5.288.22-node.14
uv: 1.29.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.38.0
napi: 4
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1c
cldr: 35.1
icu: 64.2
tz: 2019a
unicode: 12.1

来查看当前的hexo版本。这代表我们已经安装成功了。

生成博客

我们前往想要搭建博客的磁盘,创建一个博客。

1
2
➜  ~ cd /Volumes/Code
➜ Code hexo init hexoblog1

hexo会从github仓库中下载最新的博客模板,并尝试使用npm来构建它。成功后命令行会提示

1
2
3
4
5
6
7
8
9
10

╭────────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.9.0 → 6.10.0 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.10.0 │
│ Run npm install -g npm to update! │
│ │
╰────────────────────────────────────────────────────────────────╯

INFO Start blogging with Hexo!

前往初始化成功的博客目录,会看到已经生成好了一部分文件

1
2
3
4
➜  Code cd hexoblog1
➜ hexoblog1 ls
_config.yml package-lock.json scaffolds themes
node_modules package.json source

我们输入命令

1
2
3
➜  hexoblog1 hexo s -p 1234
INFO Start processing
INFO Hexo is running at http://localhost:1234 . Press Ctrl+C to stop.

这里的 -p 1234是指定了端口号,因为写文章的时候默认端口4000被占用了。

来运行博客。点击命令行中的地址,访问生成好的默认博客。

这代表我们已经成功构建了博客。

配置hexo站点信息和主题

hexo配置信息存放在/_config.yml文件中,具体的配置项可以参考hexo官方的配置文档。根据自己的需要,我的配置文件写成

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
76
77
78
79
80
81
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: xtzero
subtitle: xt
description: 从前从前,有个人爱你很久
keywords: xt zero
author: xt
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: /
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: true
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# 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: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: Chic

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

其中有一行

1
theme: Chic

是指定了主题为Chichexo官方的主题站是:https://hexo.io/themes/,你可以在这里找到想要的主题。以安装Chic主题为例,我们从hexo主题站跳转前往该主题的github首页,下载主题的文件,放在/themes文件夹下,在配置文件中修改theme参数为Chic。打开主题文件夹下的配置文件/themes/Chic/_confid.yml,根据需要,修改为

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
# html lang
language: zh

# Header
navname: XTZERO

# navigatior items
nav:
首页: /
文章: /archives
分类: /category
标签: /tag
作品站: /children
README: /about

# favicon
favicon: https://tvax4.sinaimg.cn/crop.0.0.1080.1080.180/e9021108ly8g2qxtpraroj20u00u0ade.jpg

# Profile
nickname: xt

### this variable is MarkDown form.
description: 从前从前,有个人爱你很久.
avatar: https://tvax4.sinaimg.cn/crop.0.0.1080.1080.180/e9021108ly8g2qxtpraroj20u00u0ade.jpg

# main menu navigation
## links key words should not be changed.
## Complete url after key words.
## Unused key can be commented out.
links:
# Blog: /
# Category:
# Tags:
Link: http://xtzero.me
# Resume:
# Publish:
# Trophy:
# Gallary:
# RSS:
# AliPay:
# ZhiHu:
# LinkedIn:
# FaceBook:
# Twitter:
# Skype:
# CodeSandBox:
# CodePen:
# Sketch:
# Gitlab:
# Dribble:
# Instagram:
# Reddit:
# YouTube:
# QQ:
Weibo: https://weibo.com/xtzero2
# WeChat:
Github: https://github.com/xtzero

# how links show: you have 2 choice--text or icon.
links_text_enable: false
links_icon_enable: true

# Post page
## Post_meta
post_meta_enable: true

post_author_enable: true
post_date_enable: true
post_category_enable: true
## Post copyright
post_copyright_enable: false

post_copyright_author_enable: false
post_copyright_permalink_enable: false
post_copyright_license_enable: false
post_copyright_license_text: Copyright (c) 2019 <a href=" ">CC-BY-NC-4.0</a > LICENSE
post_copyright_solgan_enable: false
post_copyright_solgan_text: 从前从前,有个人爱你很久
## toc
post_toc_enable: true

# Page
page_title_enable: true

# 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: Y-M-D
time_format: H:i

# stylesheets loaded in the <head>
stylesheets:
- /css/style.css

# scripts loaded in the end of the body
scripts:
- /js/script.js


# plugin functions
## Mathjax: Math Formula Support
## https://www.mathjax.org
mathjax:
enable: true
import: demand # global or demand
## global: all pages will load mathjax,this will degrade performance and some grammers may be parsed wrong.
## demand: Recommend option,if your post need fomula, you can declare 'mathjax: true' in Front-matter

这时候运行一次

1
hexo clean && hexo g && hexo s

即可看到效果

第一次部署到服务器

直接使用github,将全部的文件都传到github上。前往服务器,执行git clonegit pull即可。

hexo搭建的博客系统有些问题,如果不带node_modules文件夹,在服务器上没办法重新执行npm install。所以就只能全部上传。

php+github实现自动部署

实现方法请参考:

使用php配合github webhook进行自动部署

需要安装php运行环境,php版本要求 > 5.6。

在网站根目录部署ci.php,让该文件能被ip访问到。

前往repo首页,依次选择Settings-Webhooks-Add webhook。在Payload URL中填入上述可执行的php的地址,比如http://127.0.0.1/ci.php

添加成功后尝试对repo进行一次push操作,前往服务器查看是否已经自动拉取成功了。

php接收到push事件后会自动前往web_root/repo_name并执行git pull,相关代码在脚本的第28行。可以根据需要来修改。