Hexo博客搭建—从入门到精通

注:本文部分内容来自ouuan的博客原文地址


我一直以来认为,要弄一个自己的博客或者网站,必须到某些什么“建站工具”里购买建站套装,再自己买一个域名

这样算下来,一年至少得两三百RMB

而且,域名什么的配置繁杂,非常麻烦

所以,一直以来我都是用的CSDN/博客园建的博客,想想SEO也做的好(SEO好就意味着你写的东西可以在百度/谷歌等搜索引擎上被别人查到),也就没什么怨言

但是,众所周知,CSDN和博客园的广告一大堆,根本不是我能容忍的

而且,无论选择什么主题,都难看得要死qwq

(当然了,最近有一位dalao弄出了博客园的极致美化,请看BNDong/Cnblogs-Theme-SimpleMemory,这个其实还不错)

就在今年3月份,我才知道还有这样一个东西的存在

Hexo

这个东西可以帮你快速将您用markdown和Latex写的文章渲染为html文件,并借助Github/Coding/Gitee Pages快速发布。

说明

阅读完本文后,您可以做到:

  • 一分钱不花搭建一个美丽而简洁的博客(具体由主题决定)
  • 拥有一个(或者多个)简短的免费顶级域名
  • 限制您的博客仅限某些IP地址访问,或者拒绝某些IP地址访问
  • 轻松写作/发布博客
  • 做好百度与谷歌的SEO优化,其他搜索引擎类似

注:如果您要查看某个功能的设置,请直接点击文章左边的目录(TOC)直达

本文基于Hexo 3.9.0,文中不会提及因不同版本造成的差异(不过其实也没什么差异qwq

本文中提到的node.js和git安装仅适用于Windows,如果您使用其他系统请自行搜索下载

Github/Coding/Gitee设置

首先,您需要在 Github, Coding, Gitee 中选择一个:

Github:拥有最悠久的历史,最稳定,但是在国外,所以可能导致建完后您的blog访问速度慢一些

Coding:比较不错,在中国,速度访问也不错,但是不是十分稳定,近期和腾讯云开发者平台合并以后,好像还需要微信才能登录,需要实名认证

Gitee:后起之秀,勉强可以,不过搭建Pages也必须实名认证,也不是十分稳定

综上,您可以选择一个平台进行操作,也可以多个平台都操作(建议最多选择两个平台,一个国外一个国内)。如果您选择的是单个平台,请通过左边目录直达;如果您选择多个平台,请依次按照每个平台的教程进行设置。

如果求方便,推荐直接Github或者直接Coding

如果希望国内外都可以很快访问,建议Github+Coding

Gitee的话,反正我是没兴趣弄的,要弄的自己弄去,主要因为用户量小,再加上什么手机验证,什么实名验证太麻烦,故下文中并不会详细讲解qwq

Github

首先,登录或者注册一个Github账号

然后,如图所示,点击右上角的加号,选择New repository

github1

然后,看到如下界面:

github2

请在我填写xxx.github.io的位置把xxx换成你自己的Github用户名

在下面的Description里,可以写也可以不写,写了也没什么用qwq

下面必须选择Public,千万不要选择Private

下面的Initialize this repository with a README请不要勾选

好的,如果看到下面的界面,说明成功了(请自行把xxx换成您的github用户名)

github3

Coding

Coding原来在coding.net,但是最近它的个人版和腾讯云开发者平台合并,如果您是之前Coding的用户,请从coding个人版登录界面使用您原来的Coding账号/密码登录,并跳转至腾讯云开发者平台,切记要绑定邮箱,否则就只能使用微信登录

如果您不是Coding用户,请自行前往腾讯云注册界面使用微信/QQ/邮箱注册(需要验证手机号)

注册/登录完成后,请前往腾讯云开发者平台用户页,点击加号,选择项目,如下图:

coding1

然后填写项目名称,就是xxx.coding.me(请自行将xxx替换为您的用户名)

完毕后,请点击左边列表的第二项(“代码”),如果看到下图界面,说明成功:

coding2

Gitee

Gitee是一个很典型的后起之秀,不过流程也很简单,还可以使用Github登录。请在Gitee注册界面进行注册,在Gitee登录界面进行登录。

同上,不再过多叙述。点击右上角的加号,选择新建项目即可。

本地安装Hexo

请在您的计算机中安装:

安装路径可以根据喜好更改,最好按默认

建议node.js安装的时候选择左边的绿按钮,稳定版本更好,开发版本可能不稳定

请在cmd中使用 node -v, npm -vgit --version 检查是否安装成功。如果成功,应返回一行含有版本号的字符串,而不是xxx 不是内部或外部命令,也不是可运行的程序或批处理文件。,如果node或者npm不成功,请重新安装nodejs;如果git不成功,请重新安装git。

如果您已经安装Git和node.js,只是版本比较旧,您无需再次进行安装或进行更新

安装后,请从开始菜单打开Git Bash或者在任意位置右键选择Git Bash Here

git-bash

输入:npm install -g hexo,可能并不能复制粘贴,请手打qwq

如果地址被墙,请自行科学上网或者输入npm install -g cnpm --registry=https://registry.npm.taobao.org切换到淘宝镜像后输入cnpm install -g hexo

等待片刻后会有一些提示和警告,可以忽略。完成后请使用hexo -v来检查是否安装成功

接着,在任意位置创建一个文件夹,名字任意,最好不要有一些奇奇怪怪的字符

这个文件夹将用于存储你的blog的所有信息,包括设置/插件/页面的markdown文件/文章的markdown文件,随着文章/页面与插件的数量增加而增加,可以占到50M~1G,请谨慎选好位置,由于文件很多,事后移动耗时很长

接下来,在你刚刚创建的文件夹里(后文称为站点目录)右键单击,选择Git Bash Here

输入命令:hexo init

等待一会,您可以看到您选择的主文件夹里多了这些文件/文件夹:

  • node_modules
  • scaffolds
  • source
  • themes
  • _config.yml
  • package.json

其中,node_modules是用来存放您使用npm下载的插件的,scaffolds是文章模板,您稍后创建的文章会按照模板创建,可以对模板进行修改,但这些都到一切设置完毕了以后再说吧

source用来存放您所有文章/页面的markdown代码或者HTML代码,themes用来存放您稍后下载的主题文件(默认主题landscape),_config.yml则是用来进行站点配置的,在后文中会被称为站点配置文件

package.json用来存放您下载插件的目录,平常不要修改为好

请接着输入npm install来下载一些需要的包,等待下载完毕后,请打开站点配置文件,做以下基本配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 博客标题
subtitle: 博客副标题
description: 博客描述(可以填写 xxx的博客)
author: 作者
language: 语言,稍后根据主题进行设置
timezone: 时区,不建议设置

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 域名,可以暂时按照默认的 http://yoursite.com 进行设置,稍后更改
root: 不用管
permalink: 不用管,稍后SEO优化时会用到

如上进行部分设置后,请在站点目录中右键Git Bash Here,输入hexo s,打开浏览器,地址栏输入localhost:4000即可查看(这里的hexo shexo server的缩写,请在“发布博客”一章末尾详细查看)

如果4000端口冲突,请使用cmd进行taskkill /f /im 4000或者使用hexo s -p 4001修改到4001端口

如果您看到以下界面,说明成功:

hexo-show

请同时按下Ctrl+C来关闭窗口(若出现类似于终止批处理操作吗(Y/N)?的提示,输入y即可)

如果没有,请按照上述步骤重试

好的,接下来就是挑选主题的时候了qwq

主题选择与下载切换

好的,我们来看一下hexo官网主题列表

天啊,这么多!

没错,慢慢挑吧qwq

当然了,也可以利用搜索功能,如果您喜欢material design,不妨搜索标签material(顺便安利一波我的主题Materialized)

推荐几个:

  1. NexT,非常火爆,人气很高
  2. Jacman,简洁明了,加载快速
  3. Material(最新版有Bug,请使用1.5.2而不要使用1.5.3及以上版本)
  4. Butterfly,适合游记比较多的博客,图片功能完善
  5. Materialized,加载快速,Material化

如上,对每个主题,点击预览图片会进入预览网站,点击蓝色的主题名称会进入相应的Github repo。

若主题README中无特殊说明,请使用下面命令进行主题复制:

1
git clone https://github.com/xxx/xxx themes/xxx

(上面的https://github.com/xxx/xxx请替换为主题repo地址,themes/xxx的xxx请替换为主题名称)

要使用一个主题,请先打开站点配置文件,将themes: landscape改为themes: xxx(xxx为主题在themes下的目录名字,就是刚刚代码里的主题名称)

比如,我把next主题通过git clone到了themes目录下,就把站点配置文件中的themes选项改为next即可

在每个主题下都有一个_config.yml文件,它被称为主题配置文件,用来对主题进行自定义设置(注意,主题的语言设置在站点配置文件里)

好的,接下来,我以NexT主题为例,带领您领略一下主题中多样的功能

(本文基于next 7.1.2,之所以我不更新是因为7.3.0改动太大,导致很多地方不美观,7.2.0取消了自定义设置)

(Update:后来看了ouuan dalao博客的评论以后发现,7.2.0及以上版本的NexT主题在主题配置文件里有一个custom_file_path选项,把里面的style取消注释并在相应的目录添加一个相应的文件,放入自定义设置的代码即可)

NexT主题基础配置

请打开next主题的主题配置文件,Ctrl+F搜索Scheme Settings,找到下面选项:

1
2
3
4
5
6
7
8
9
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

这里的Muse Mist Pisces Gemini可以理解为NexT的四个小主题

截图如下:

Muse:

Muse

Mist:

Mist

Pisces:

Pisces

Gemini:

Gemini

默认是Muse,个人推荐Gemini,Pisces和Gemini的区别就是Gemini更宽松一些,Mist也不错

如果想用Muse的话,还是先找好背景图片再说吧… 否则…

PS:如果想查看自己网站的效果,可以随时保存修改然后hexo s

请继续在主题配置文件中Ctrl+F搜索powered,可以找到下面选项:

1
2
3
4
5
6
7
8
9
10
11
powered:
# Hexo link (Powered by Hexo).
enable: true
# Version info of Hexo after Hexo link (vX.X.X).
version: true

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: true
# Version info of NexT after scheme info (vX.X.X).
version: true

这会让博客生成后底部存在“由Hexo强力驱动 V3.9.0”和“主题:NexT V7.1.2”(文字我不太记得清楚了qwq)

如果您想给hexo或者next主题打广告,请跳过此段

如果您想博客底部干净整洁,请把上面片段中所有true改成falsetheme.enable选项必须保持true

安全警告:根据NexT主题的LICENSE,您应该确保theme.enable选项打开,NexT主题LICENSE原文节选如下:

1
2
3
4
5
c) A covered work must retain «NexT» official website link (https://theme-next.org) in footer section of every website created, modified or manipulated by using «NexT». «NexT» theme configuration must be:

footer:
theme:
enable: true

接下来,请继续在主题配置文件中找到以下内容(请自行Ctrl+F搜索)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimeter is the target link.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
# External url should start with http:// or https://
menu:
home: / || home
#about: /about/ || user
categories: /categories/ || th
tags: /tags/ || tags
archives: /archives/ || archive
links: /links/ || link
message: /message/ || comments
following: /following/ || group
codes: /codes/ || file-code-o
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

这里就是主菜单设置了,也就是Muse中间的,Mist上面的,Pisces和Gemini左边/右边的菜单

格式很简单,可以写成这样:{name}: {link} || {icon}

{name}是指显示在菜单中的名称,比如categories和tags,就是分类和标签

{link}是指链接地址,可以为两种形式:

注意!链接到某个网站请不要直接输入域名(baidu.com),请务必输入 http://baidu.com 或者 https://baidu.com

  • 博客的子链接:/xxx/ (xxx是指页面的名称,在后文会提到)

{icon}是指图标名称,请在Font Awesome查找,查找方式如下:

Font Awesome

比如我想菜单里有第二行第一个图标(那个黑白半圆的),只需要把上面的{icon}替换为adjust即可

这下面还有这个设置:

1
2
3
4
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false

这个基本上不用管,如果你真的不想在菜单里显示图标,请把icons设置为false

好的,接下来请找到下面的侧边栏设置:

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
# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

# Posts / Categories / Tags in sidebar.
site_state: true

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
GitHub: https://github.com/code004Accepted || github
E-Mail: mailto:[email protected] || envelope
Google: https://plus.google.com/code004Accepted || google
Twitter: https://twitter.com/brianchen2006 || twitter
YouTube: https://youtube.com/code004Accepted || youtube
Instagram: https://instagram.com/brianchen2019 || instagram
Skype: skype:code004?call|chat || skype
Codepen: https://codepen.io/code004Accepted/ || codepen
Ask.fm: https://ask.fm/code004 || question
LGOJ: https://www.luogu.org/space/show?uid=228062 || code

social_icons:
enable: true
icons_only: false
transition: false

# Blog rolls
links_icon: link
links_title: 友情链接
links_layout: block
#links_layout: inline
links:
# Standred C++: https://isocpp.org
# Cloudflare: https://cloudflare.com
# Python: https://www.python.org

# Sidebar Avatar
avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.jpg
# If true, the avatar would be dispalyed in circle.
rounded: true
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# If true, the avatar would be rotated with the cursor.
rotated: true

# Table Of Contents in the Sidebar
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
max_depth: 6

sidebar:
# Sidebar Position, available values: left | right (only for Pisces | Gemini).
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display, available values (only for Muse | Mist):
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false
# Click any blank part of the page to close sidebar (only for Muse | Mist).
dimmer: false

back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
enable: false
#service: chatra
#service: tidio
icon: comment # icon in Font Awesome 4, set false to disable icon
text: Chat # button text, change it as you wish

sidebar

如图所示,site_state就是在侧边栏中显示您博客的文章(日志)数量/分类数量/标签数量,就是上图的1

social以及它下面的许许多多的选项就是图中的2,图标同样可以修改

而底下的links则是友情链接设置,由于友情链接太多所以我单独开了一个页面来放,各位可能看不到侧边栏友情链接的效果qwq 欢迎前往其他人的blog查看

注意到,友情链接里有links_layout选项,给出了两种设置:blockinline

说直白点,block就是一行一个,每个居中;inline就是一行多个,把每行都尽可能填满,居中

接下来的avatar设置就是侧边栏头像,请将头像放到next主题目录下的source/images文件夹中,然后输入/images/avatar.jpg(avatar.jpg是文件名,可随意修改)

当然了,按照配置文件的说明,您也可以放到站点目录下的source/images文件夹中,然后输入/uploads/avatar.jpg,不过我并不推荐这种方式,我也并未尝试过,所以还是请使用上面一种方式

注意到,关于侧边栏头像的还有几个设置:

1
2
3
rounded: true
opacity: 1
rotated: true

其中,rounded是指是否让头像呈圆形(就是以正方形头像的对角线交点为原点,正方形边长的一半为半径,画出来一个圆,只有圆内的头像会显示出来 哎呀怎么这么复杂),opacity是指头像的不透明度(注意不是透明度),设置为1表示完全不透明,建议0.9~1,rotated表示头像是否随鼠标旋转(就是鼠标移上去的时候头像是否转),rotated设置为true以后,鼠标移上头像就会顺时针旋转一整圈(360°),鼠标移下来就会逆时针转回去

下面可以找到toc的设置,这个设置的作用是浏览文章时可以通过侧边栏的目录直达某一个大标题或者一个小标题(不就是目录吗…

toc的选项:

1
2
3
4
number: true
wrap: false
expand_all: false
max_depth: 6

解释一下,number是指自动为标题加上编号,比如会有3的大标题编号,3下面的小标题就自然命名为3.13.2,更小的就是3.1.1… 可以根据个人喜好设置

wrap开启后,当标题长度大于侧边栏长度时,自动换行,不推荐

expand_all是指自动展开所有标题

expand_all设置为false时,不自动展开标题,换句话说就是当你点到1的大标题时才会展开1.1 1.2这些小标题,当你点击1.2时才会再显示1.2.1 1.2.2之类的更小的标题

但是,一旦expand_all被打开,你的所有文章的所有标题都会直接被显示出来,会很乱,不过也可以根据个人喜好吧qwq

max_depth表示标题探索深度,Markdown只有6层标题,所以最多设置为6,如果你只想让目录显示1/2/3级的大标题,输入3即可,不推荐更改

好的,底下有一长串的侧边栏位置设置,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
sidebar:
# Sidebar Position, available values: left | right (only for Pisces | Gemini).
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display, available values (only for Muse | Mist):
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false
# Click any blank part of the page to close sidebar (only for Muse | Mist).
dimmer: false

首先有个position的设置,意思是侧边栏是在左边还是右边,只对PiscesGemini两个小主题有效

然后底下有个被加注释的width设置,就是手动设置侧边栏宽度,极度不推荐(除非你有特别长的介绍/友链/文章标题…)

有一个display设置,这个设置只对MuseMist有效,有四个设置值:

  • post 当打开文章界面的时候,侧边栏自动弹出,但在首页/分类页/归档页等不会自动弹出,需手动点击按钮展开
  • always 在所有页面自动弹出
  • hide 在所有页面都不弹出,只在点击按钮时展开
  • remove 连按钮都不显示,完整地删除侧边栏

个人建议post或者always,按个人喜好选择

接下来有一个offset的设置,这个是指头像到侧边栏顶部的距离,默认即可,只对PiscesGemini有效

然后有一个onmobile的设置,只对MuseMist有效,是指在手机或者很窄的浏览器中也显示侧边栏,不建议开启

最后一个dimmer的设置,也只对MuseMist有效,是指打开侧边栏后点击页面任意位置关闭侧边栏,建议开启

好的,继续看侧边栏的设置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
back2top:
enable: true
# Back to top in sidebar.
sidebar: true
# Scroll percent label in b2t button.
scrollpercent: true

# A button to open designated chat widget in sidebar.
# Firstly, you need enable the chat service you want to activate its sidebar button.
chat:
enable: false
#service: chatra
#service: tidio
icon: comment # icon in Font Awesome 4, set false to disable icon
text: Chat # button text, change it as you wish

一共是back2topchat两个设置,back2top是指侧边栏底部的回到顶部按钮,建议开启,scrollpercent是指在按钮旁边显示页面已经阅读百分之多少,详见上面图片里的4

chat是在侧边栏的聊天按钮设置,建议不要开启,设置麻烦,而且Bug很多,会导致博客加载很慢

好的,侧边栏设置到此结束,现在基本上你已经配置好NexT主题的界面了,不过…你的网站还是本地的!先讲一下pages搭建,再继续谈NexT和其它主题的配置及高级优化吧qwq

测试发布博客

现在,你应该还什么文章都没写吧qwq 不过在之前的hexo s的时候可以看到,你的博客里已经有一篇Hello World的文章了!这是Hexo帮你写的,里面也有一些教你写文章的说明,这个等会在解释

现在最重要的是,怎么发布你的博客… 你总不可能让你的朋友们都来你的电脑上才能看到博客吧!

好的,废话不多说,我们来先讲一下怎么把你的博客发布到Github/Coding/Gitee

为了把本地仓库的内容传送到GitHub上,需要配置ssh key,你可以把ssh key理解为一个身份验证码,在你把你的博客或者其他内容传送到Github上时,你需要进行身份验证。无论是你的博客还是其他代码仓库都是如此(不然别人就可以随便瞎改你的代码仓库了)

在Git Bash中输入:ssh-keygen -t rsa -C {email},请把{email}替换为你注册Github所用的邮箱

直接按下三次Enter键默认即可,会把ssh key存到C:\Users\Administrator\.ssh里,如果你的计算机用户名不是Administrator,也不用担心,Git会帮你把一切办好

好的,ssh密钥生成成功,请打开上面的地址C:\Users\Administrator\.ssh,里面有一个id_rsa.pub文件,这就是你的ssh key的公钥了(不懂公钥请忽略)

右键使用记事本或者你的文本编辑器打开,复制里面的内容,回到Github/Coding/Gitee并登录

下面的设置差不多,就只讲Github的

在Github中点击自己头像,选择Settings,然后选择左边的SSH and GPG keys,点击右上角的绿色按钮New SSH key会看到这个界面:

SSH keys

请把刚刚复制的密钥粘贴到Key框中,Title可以随便写,好像不写也可以,然后点击绿色按钮Add SSH key

接下来,需要在本地验证一下是否成功,在Git Bash中输入ssh -T [email protected],如果提示Hi {username}! You've successfully authenticated, but GitHub does not provide shell access.就说明SSH配置成功,{username}应该是你的Github用户名

这里说一下,如果是Coding要验证,请在Git Bash中输入ssh -T [email protected],如果提示:

1
Coding 提示: Hello {username}, You've connected to Coding.net via SSH. This is a personal key. {username},你好,你已经通过 SSH 协议认证 Coding.net 服务,这是一个个人公钥

说明SSH配置成功,{username}应该是你的Coding用户名

Gitee也是同样的道理,ssh -T [email protected]即可

好的,现在你已经能正常连接到Github/Coding/Gitee了,请打开站点配置文件,复制并粘贴到文件末尾:

1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
- type: git
repo:
github: [email protected]:{username}/{username}.github.io.git

(如果文件本身就有这项设置,请先删除原来的空白设置)

注意:

  1. 不知道为什么,好像用[email protected]部署Coding会报错,所以请用https连接
  2. 之前选择了多个平台的,依次往下写即可,比如:
1
2
3
4
5
6
7
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
- type: git
repo:
github: [email protected]:{username}/{username}.github.io.git
coding: https://git.coding.net/{username}/{username}.coding.me.git
  1. 请注意,不要直接复制代码就开干,请把{username}替换过来!
  2. 千万注意:github:后面要有一个空格,你继续写的也是一样,否则会出现错误

Github那行的所有{username}换成你的Github用户名,Coding那行的所有{username}换成你的Coding用户名,Gitee的请自己百度或者直接在项目地址选择克隆/下载然后复制里面给的连接

好的,请记得要保存站点配置文件,可以开始发布了

(温馨提示:以后在发布前建议先使用hexo s检查界面是否有Bug或者Markdown是否崩了等等)

发布指令(在Git Bash中执行):

1
hexo cl && hexo g && hexo d

如果发布成功,您应该看到:INFO Deploy done: git

恭喜!

如果出现一大堆什么 at xxx.xxx 之类的,说明可能由于主题配置或者站点配置问题,导致某些设置无法被识别,从而出现错误,记住,所有在两个配置文件中的设置,形如xxx: xxx的必须在冒号后打一个空格!(当然了,如果hexo s无错误,但发布时出错,说明肯定是你发布的配置有问题,比如把github打成guthub之类的低级拼写错误)

这时候,应该可以通过访问 http://xxx.github.io (请自行将xxx换成您的Github用户名)或者 http://xxx.coding.me (请自行将xxx换成您的Coding用户名)等等来查看您的博客了qwq(如果提示404 There isn't a GitHub Pages site here.等,请进入相应的repo,选择Settings,在Github Pages中选择master分支即可)

备注:

  1. hexo shexo server的缩写,在本地预览站点
  2. hexo clhexo clean的缩写,删除上次生成的站点HTML文件
  3. hexo ghexo generate的缩写,生成站点HTML文件
  4. hexo dhexo deploy的缩写,把生成的站点HTML文件发布到git仓库中(或者还有别的发布方式)

注意:hexo clean不能缩写为hexo c,因为存在命令hexo config

书写并发布博客

前面已经讲了博客的配置/发布了,现在讲一下如何在Hexo里写一篇博客

站点目录中右键,选择Git Bash Here,输入命令hexo new xxx(请把xxx替换为您的文章URL,可以用中文,含有空格可能会出错)

举个例子:hexo new fuck就是生成一篇URL为fuck的文章,编辑并发布后,您可以在{你的网址}/fuck访问到这篇文章。文章标题可以稍后修改

也可以hexo new 你好!,稍后可以在{你的网址}/你好!访问。但是,不能用hexo new hello world,必须hexo new hello-world或者hexo new helloworld都可以

好的,假设我们刚刚执行的是hexo new test,待命令执行成功后,你应该可以在你的站点目录里找到一个名叫source的文件夹,打开它,你应该可以看到一个名叫_posts的文件夹,打开它,可以看到test.mdtest就是前面所说的URL,也是你之前填的那个xxx

这就是这篇博文的Markdown源代码了,你可以随意地修改它,基本上所有常用的Markdown语法都能解析,但是Latex暂时不能,这一步等会再配置

如果您平常经常写代码,您肯定会喜欢使用VS Code作为您的Markdown编辑器,VS Code支持几乎所有语言代码的高亮;如果您很少写代码,只是平常写一些文章,您或许会更加喜欢Typora

Typora是什么呢?

一个轻便但高级的Markdown编辑器

尽管体积很小,但是支持图片/标题/表格/清单/代码块/图标/表情/高亮…,让你可以专注于你所写的内容。Typora还可以自动帮你实时生成文章的TOC,还可以实时字数统计,自动配对括号,甚至可以方便地导出为PDF/HTML/DOC等,也可以从这些类型地文档导入。

官网地址:https://www.typora.io/

好的,打了这么久广告,让我们回归正题。

按理说,你打开你新建完的markdown文件,会看到下面的一个模板:

1
2
3
4
5
---
title: test
date: xxxx-xx-xx xx:xx:xx
tags:
---

好的,title:后面就是这篇文章的标题了,注意冒号是英文的,和文章名之间必须有一个空格,否则后面生成的时候会报错

date:后面是文章创作的时间,这个时间会由系统自动设置为你在Git Bash里创建这篇文章的时间,一般来说不用修改,我曾经舍不得删一篇没用的测试文章,就把它的日期改成了0100-01-01 00:00:00,然后我发现年份必须在0100之后,否则好像会出一些Bug

tags:后面是这篇文章的标签,请按照以下格式书写:

1
2
3
4
tags: # 注意,冒号后面最好加一个空格
- 标签1
- 标签2
- 标签3

当然了,如果你这篇文章只有一个标签,也可以用tags: [标签1]进行书写

很明显,这些设置是不够的,我们可以加上categories的设置,也就是分类:

1
2
3
4
5
6
7
8
9
---
title: test
date: xxxx-xx-xx xx:xx:xx
tags:
- 标签1
- 标签2
- 标签3
categories: [分类]
---

注:Hexo不支持多个并列分类,只支持父子分类,但有些主题(比如我的主题Materialized)可以支持。在大多数主题(比如NexT)中,一篇文章使用多个category会导致后面的分类成为后面的分类成为前面分类的子分类,比如:

1
2
3
categories: 
- 分类1
- 分类2

会导致分类2成为分类1的子分类,而不是并列分类。

但是,在像Materialized的少数主题中,会把上面的语法当成并列分类显示。Theme-Materialized: https://github.com/theme-materialized/hexo-theme-materialized

好的。你已经完成了基本的文章设置操作,可以开始尽情地使用Markdown写文章啦~

写完了以后,保存,回到Git Bash,输入hexo cl && hexo g && hexo d并静待完成即可。然后,你就可以在你的网站上愉快地查看你的博客了!

备注(如果你是一步步跟着来的,不用看了,“尝试发布博客”那章有了):

  1. hexo shexo server的缩写,在本地预览站点
  2. hexo clhexo clean的缩写,删除上次生成的站点HTML文件
  3. hexo ghexo generate的缩写,生成站点HTML文件
  4. hexo dhexo deploy的缩写,把生成的站点HTML文件发布到git仓库中(或者还有别的发布方式)

注意:hexo clean不能缩写为hexo c,因为存在命令hexo config

NexT主题高级美化

暂时咕咕qwq


注:由于博主较为忙碌,本文更新极为缓慢,更多请访问ouuan的博客相关文章 https://ouuan.github.io/hexo%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%8C%87%E5%8C%97

本文标题:Hexo博客搭建—从入门到精通

文章作者:code004

发布时间:2019年08月25日 - 20:59

最后更新:2019年09月14日 - 20:23

原始链接:https://code004.ml/posts/how-to-build-a-hexo-blog/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。