avatar

hexo+trivas自动发布到github与coding

写在前面

首先,当我们要开始写博客的时候,我们可以有两种选择来发布你写的博客。

其一,在各大博客平台上发布。选择这条途径的话,我们可以省去一系列的麻烦,只专注与自己的内容即可。但是有好多限制,有些内容不能发布。选择的平台可以有很多,如CSDN,简书等。这两个平台都支持markdown的格式,很方便。

其二,则是自己搭建一个博客,可以有动态和静态博客的选择。之前也尝试过动态博客的搭建,首先需要有自己的额服务器,github上有着开源的博客框架,大家可以尝试一下,我是太笨,没有成功,各种环境的依赖问题已经炸裂。下面贴上当时尝试的一个Django所写的框架地址。

然后则是静态博客的搭建,Hexo是一个静态博客的生成框架,使用简单又快速。

下面的文章便介绍我通过Hexo搭建博客所爬过的坑。

从开始到结束,按照搭建博客的顺序书写,大家可以按着这个流程搭建,中间遇到问题可以私信我。

博客搭建

搭建过程所用到的环境:Node.js

第一步,安装Node.js

安装后在命令行检查安装是否成功。

1
2
node -v
npm -v

若无报错并返回版本号,证明安装成功。

第二步,安装Hexo
1
npm install -g hexo-cli
第三部,初始化Hexo

创建一个文件夹myblog,用来存放Hexo所生成的文件。

1
2
3
mkdir myblog
cd myblog
hexo init

之后我们在文件夹下可以发现生成了hexo博客的文件,目录结构如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── _config.yml
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
└── themes
└── landscape

其中我们只需要其中几个目录与文件。

1
2
3
4
5
_config.yml			# 站点配置文件,需要按照自己的信息进行配置
package.json # 搭建博客过程中所安装的插件都在该文件中配置,一般不用手动修改
scaffolds # 生成模板,hexo命令生成文件的模板
source # 生成静态博客的源码文件,_posts下是文章的存放位置
themes # 博客主题的安装目录,landscape是默认主题,之后安装的主题也都在这个文件夹下

现在我们就可以通过以下命令Hexo生成博客了。

1
2
3
hexo clean	# 清理删除public文件夹,每次生成前都需清理
hexo g # 生成博客,可以发现会生成一个public文件夹
hexo s # 本地启动hexo server

之后就可以通过http://localhost:4000/访问博客。

这里我贴出我的站点_config.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# hexo-neat
neat_enable: true
neat_html:
enable: true
exclude:
neat_css:
enable: true
exclude:
- '*.min.css'
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'

# Site
title: 0pt1mus
subtitle: 不温不火,不急不躁,了解hows背后的whys
description: 文化水平不够可以读,为人处世不同可以学,钱没有可以赚,唯独你的内心必须坚定,你要不断努力,并且相信你自己绝对是一个有价值,值得被尊重和喜欢的人。
author: 0pt1mus
email: 1040570917@qq.com
language: zh-CN
timezone:
avatar: /images/avatar.jpg
# search: 59fe6eea70113d77622d1c85f2aeb87a

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://superj.site/
root: /
permalink: :year/:month/:day/:id/
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: Butterfly

# Search
search:
path: search.xml
field: post
format: html
limit: 10000

jsonContent:
dateFormat: DD/MM/YYYY
posts:
title: true
date: true
path: true
text: true
raw: false
content: false
slug: false
updated: false
comments: false
link: false
permalink: false
excerpt: false
categories: false
tags: false
author: false


feed:
type: atom
path: atom.xml
limit: 20
hub:
content:

sitemap:
path: sitemap.xml

baidusitemap:
path: baidusitemap.xml

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
# - type: git
# repository: git@github.com:overoptimus/overoptimus.github.io.git
# branch: master
- type: git
repo:
coding: git@e.coding.net:overoptimus/overoptimus.git
github: git@github.com:overoptimus/overoptimus.github.io.git
branch: master

发布到github和coding

目前我们只能在本地访问到我们的博客,现在我们将博客托管到github和coding中。

第一步,注册github和coding的账号
第二步,创建仓库

注册登录后,在首页可发现new repository,新建一个仓库。

github创建名字为username.github.io的仓库,比如我的用户名为overoptimus,我的仓库名为overoptimus.github.io

coding创建名字为username的仓库,比如我的用户名为overoptimus,我的仓库名为overoptimus

注:coding的仓库名可以为任意

第三步,生成ssh添加到github和coding

在本地命令行中:

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yournameyouremail是你在注册时的用户名和邮箱。

可通过以下命令检查是否配置正确。

1
git config --list

然后生成ssh:

1
ssh-keygen -t rsa -C "youremail"

这时就会提示你在ssh生成在什么位置,我是在mac环境下,是在~/.ssh下。

1
2
3
.
├── id_rsa
├── id_rsa.pub

可发现其中有两个文件,id_rsa是秘钥,id_rsa.pub是公钥。我们需要将公钥的内容保存在githubcodig中。在网站的setting中可以找到设置ssh的选项。

第四部,安装通过git部署的插件
1
npm install hexo-deployer-git --save

注:以下若无特殊声明,均在myblog目录下。

第四步,修改_config.yml
1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
repo:
coding: git@e.coding.net:overoptimus/overoptimus.git
github: git@github.com:overoptimus/overoptimus.github.io.git
branch: master

将最后的deploy修改为上面的样子,注意其中的链接是你的仓库的链接。

第五步,发布到github和coding
1
2
3
hexo clean
hexo g
hexo s
第六步,在github和coding中打开web服务。

分别进入github和coding的仓库中,打开设置页,github是github pages,coding是构建与部署中的静态网站

之后就可以通过https://overoptimus.github.io/和coding提示的网址访问我们的网站。

第七步,配置个性域名

首先要购买一个域名,可以在阿里云购买,也可以在GoDaddy中购买。

然后在解析中,添加CNAME类型的解析指向github和coding的网址。

再添加一条记录为www的记录。

然后我们再添加两条记录,路线选择境外,记录还是www@,记录值为我们的github pages的网址,我的即为overoptimus.github.io

之后我们可以通过自己的域名访问我们的博客。

配置主题

从搭建博客到现在也更换过了好几个主题,有nextpurebutterfly

现在使用的是butterfly,配置情况可以参考下面的网址,很详细,按着配置下来就可以了。

Butterfly

开始写博客

到现在我们可以开始写博客了。

1
hexo new "文章名"

在博客的目录下,也就是myblog下,输入上述命名,可以在source/_post下生成文章名.md的文件,然后我们编辑该文件,书写文章就可以,markdown的语法网上有很多教程,百度一下学习吧。

每次写完之后,进行以下命令:

1
2
3
hexo clean
hexo g
hexo d

这样就可以将你的博客发布上去了。

配置trivas实现自动部署博客到github和coding

我们在写博客的过程中,每次写了一篇文章后,就要执行重复的命令去将生成博客,然后推送到githubcoding,并且我们也会需要将源码进行一个备份,如果我们备份在硬盘里,每次写完文章都需要去更新硬盘中的文件,会比较麻烦。下面我介绍通过trivas同时实现博客的备份和自动化部署。

首先我们在github中创建一个名为hexo-source的仓库。然后在本地执行以下命令。

1
2
3
4
5
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/overoptimus/hexo-source.git //这里要修改为你自己的仓库地址
git push -u origin master

将本地的hexo源码推送到远端的仓库。

然后打开trivas官网。

通过github的账户进行登录,然后开启hexo-sourceservices integration服务。

点击setting添加Environment Variablesname可以自己命名,value添加githubcoding生成的访问令牌,生成的位置github在settings->developer settings->personal access tokens,coding在个人设置->访问令牌。权限选择选择完整的仓库读写。

然后在本地的博客目录,即myblog下,创建.trivas.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
language: node_js # 设置语言

node_js: stable # 设置相应版本

cache:
apt: true
directories:
- node_modules # 设置缓存,传说会在构建的时候快一些

git:
depth: 1
submodules: true

before_install:
- export TZ='Asia/Shanghai'
- npm install hexo-cli -g

install:
- npm install # 安装hexo及插件

script:
- hexo clean # 清除
- hexo g # 生成

after_script:
# - git clone https://${GH_REF} pub_web # 因为我有两个仓库,先将发布服务的仓库clone下来,
# - cp -rf public/* pub_web/ # 将源博客仓库(blog.git)目录下的public文件夹下的文件复制到发布服务的仓库(chenzhijun.github.com.git)中
# - cd pub_web # 进入到git仓库
- cd ./public
- git init
- git config user.name "overoptimus"
- git config user.email "1040570917@qq.com"
- git add .
- git commit -am "Travis CI Auto Builder :$(date '+%Y-%m-%d %H:%M:%S')" # 零时区,+8小时
- git push --force --quiet "https://${GITHUB_TOKEN}@${GH_REF}" master:master
- git push --force --quiet "https://EBlvrRYUzD:${CD_TOKEN}@${CD_REF}" master:master
branches:
only:
- master #只监测master分支,这是我自己的博客,所以就用的master分支了。
env:
global:
- GH_REF: github.com/overoptimus/overoptimus.github.io.git #设置GH_REF,注意更改yourname,GITHUB_TOKEN:就是我们在travis-ci仓库中配置的环境变量
- GITHUB_TOKEN: "${github_token}"
- CD_REF: e.coding.net/overoptimus/overoptimus.git
- CD_TOKEN: "${cd_token}"

注意其中的一些位置要改成你自己的信息,特别注意在推送到coding的地址中https://后接的一串字符是在你创建coding的访问令牌时的页面中提示你的。且其中${xx_token}是与你在Environment Variable中的name是一致的。

现在设置已经完成,将本地的更改推送到远程仓库,然后就会在trivas的网站中发现,开始自动部署了。过一会儿你就访问你的博客,发现已经更新了。

然后你就会发现,你可以在任意的地方,即使没有gitnode.js的环境,你在源码仓库进行更改并提交后,trivas就可以帮助你将更新后的内容同步到你的博客中。

写在后面

现在你就可以很方便、优雅的书写自己的博客文章了,如果你并不喜欢butterfly这个主题,你也可以百度一下,寻找你自己的最爱。

希望这篇文章能够对你有所帮助。

文章作者: 0pt1mus
文章链接: https://superj.site/2020/02/22/20200222212413/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 0pt1mus

评论