乐趣区

半个小时搭建出自己的个人博客Hexo博客系统搭建基础部分

jiezi

建议访问原文获得更好的阅读体验
https://luanshizhimei.top/pos…

Hexo 搭建网站学习笔记（一）—— 基础部分

身边的朋友似乎越来越多开始玩 Hexo 来搭建属于自己的免费静态博客，反思一下自己还在使用广告漫天飞的 CSDN（其实思否也不错新人也容易拉到流量），痛定思痛决定好好学习如何使用 Hexo 搭建一个简单网站。

前言

Github page 是什么？

Github 作为全球最大的同性交流平台一直为优秀的秃顶人士们提供着各式各样的代码托管服务。而他推出的 Github page 就是将你的代码仓库当成一个静态网页站点。意味着我们可以直接上传 HTML 网页到仓库并指定一个域名就可以十分方便为我们的项目添加网页 demo。

选择一个好用的博客框架

当然若每篇博客都需我们自己用 HTML 编写是十分麻烦的，于是应对这种情况出现许多优秀针对于博客的静态网页生成器，我们就称之为博客框架吧。代表有：Jekyll、Hexo 等。

Jekyll 是 Github page 官方钦定博客框架，采用的 Ruby 语言开发，软件生态圈也非常的丰富。但基于 Nodejs 的 Hexo 可能对于前端人员会更加友善一些。实际上他们之间没有明显好坏之分，只要觉得那个用的顺手就好。

这里我们就响应文章标题使用 Hexo 开始来搭建我们的博客吧！

第一步、安装 Hexo 博客系统

（一）、安装环境

正如前文所述，我们首先需要安装一个 Nodejs 来支持 Hexo。

Nodejs 下载地址 : http://nodejs.cn/download/

安装注意要点：

  • 你是什么操作系统就选择什么版本的软件就可以，过程其实是大同小异。
  • Windows 用户在安装 Nodejs 的过程中，一定要勾选上 npm package manager(不然之后就不能以 npm 包的形式安装 Hexo)。
  • 记得勾选 Add to PATH(添加到环境变量)。

虽然安装 Nodejs 就可以搭建 Hexo 环境，但是好用的工具会使你的工作事半功倍。于是我推荐安装 Visual Studio Code 来方便的编写博客以及输入命令等。（Vscode 的终端又不是不能用）

VS Code 下载地址 : https://code.visualstudio.com…

安装注意要点：

  • 一定要勾选上在目录中显示 Open with Code 的选项。(vscode 是将一个文件夹当成一个项目看待，所以勾选上方便以后打开项目)
  • 如果软件是全英文，就点开右侧导航栏最下面的 Extensions(插件)，在搜索栏中输入 Chinese (Simplified) Language，点 Install(安装)。然后软件会提示你重启点确认就可以了。（VScode 的翻译已经很不错了）
  • (可选)安装一个 vscode-icons 的插件会方便区分不同的文件。

（二）、安装 Hexo

1. 打开运行（快捷键 Ctrl+R），启动 cmd。（输入 cmd 点回车）

2. 然后分别输入如下命令查看是否可以得到正确的 nodejs 和 npm 的版本号，若提示没有该命令的就返回上一步重新安装。

node -v
npm -v

3. 确保 nodejs 和 npm 正确安装之后便可以输入如下命令安装 hexo。（一定要带上 - g 安装到全局环境）

npm install -g hexo-cli

4. 若出现关于 fsevents（mac 下的软件）的 WARN（警告）忽视就好，实在不放心就输入版本命令查看 hexo 是否能运行。

hexo -v

（三）、初始化博客

1. 在你的硬盘上选择一块风水宝地随意创建一个文件夹。（比如：在我的文档里创建了一个名为 Blog 文件夹）

2. 使用 VS Code 打开你新创建的文件夹。（如果前面勾选了在目录菜单中增加 Open with Code，就可以直接使用鼠标右键采用 VS Code 打开）

3. 然后调出终端（Ctrl + Shift + `），输入安装 Hexo 的命令。（这里可以使用 Shift + inssert 粘贴）

hexo init

4. 初始化完成之后根据提示再安装一下所依赖 npm 包。

npm install

第二步、日常写作

（一）、创建新的博客

经过以上步骤并没有发生错误的话，就恭喜你已经成功搭建出 Hexo 博客。编写博客的环境已经有了，剩下的问题就是如何编写博客？

同样在 VS Code 的终端中输入新建（new）命令，末尾跟上的你的博客的名称。

hexo n 博客的名称

创建文件成功之后，软件会提示新博客在 /source/_posts/ 下。

打开文件会发现 Hexo 已经提前帮助我们写上了名称、时间、创造者等信息。（开头部分是 yml 配置语言，随后我们还自定义这些信息等）

（二）、MarkDown 简单上手

目前主流的博客系统，基本上都采用的 MarkDown（即.md 文件）来编写博客。当然也不用特别担心 md 语法特别难，MarkDown 的优美之处便是让创造者把重心放在写作上这件事情上而不是格式排版。

打开新创建的 md 文件（即新创建的博客），在 vscode 打开命令面板（Ctrl + shift + P），输入：MarkDown: 打开侧边浏览。

这么做的好处就是你可以一遍输入，一遍查看文档的效果。

我们就以一篇文章大概编写顺序为例来快速上手 md。（如果是小白建议都手动输入到编辑器中看一下效果）

一、标题

首先写作我们常常为取一个恰当的标题而苦恼，同样编写 md 文档中标题也是十分重要的。

md 的标题一般多个 #并排在一起，并空出一个 空格，隔开标题名。

‘#’ 的数量代表了标题级数，不同标题级数代表了内容的层次。善用级数可方便的制作出带目录的文章。

md 最高可以支持六级

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

二、段落换行

在 md 中直接换行只是增加一个空格，换行的话必须在结尾的结尾输入至少 两个以上的空格。

当然也可以采用两个以上的换行，只不过会产生多个空行。（个人觉得大多数的 md 排版段落段距都比较小，多个空行还美观一些）

三、分割线

有时我们需要一个长长分割线区分不同类型的内容。他的语法很简单就是一行三个以上 *(数量没有上限)就可以了。

下面这个就是分割线
***

四、列表

无序列表

无序列表一般使用在不需要划分次序等级的条目中，语法也非常简单：一个 -，然后用 空格 隔开条目。

- 无序列表，条目一
- 无序列表，条目二
- 无序列表，条目三
有序列表

刚好和上面无序列表是相反的，强调的是次序和等级。语法：数字 +.，然后用 空格 隔开条目。

1. 有序列表，条目一
2. 有序列表，条目二
3. 有序列表，条目三

五、引用（块引用）

在写博客尤其是技术博客我们难免引用其他人优秀的部分文章。为了注明这是他人文章或外部链接。我们可以使用引用来区分，语法：> + 空格 + 内容。

并行多行的开头的 > 表示一体的，分割块引用的办法就是多打一个换行，块引用也可以嵌套方法就是几层就加几层的 >

> 单独一行

> 表示多行 1
> 表示多行 2

> 块引用也可以嵌套
> > 这个就是新的嵌套

六、超链接 / 图片

超链接

点击可指向其他地方（站外内都可以），语法：

[这里是显示的文字](www.baidu.com)
图片

其实插入图片的代码就比超链接前面多了个!，语法：

![图片不能显示时出现的文字][img01]
更加优雅的写法

上面的写法都可以实现我们插入超链接 / 图片，但是这种写法会严重影响到源文件的可读性（多图文的源文件会充满各种地址），所以我推荐的是变量引用的办法。

就是我们先定义好对应资源地址的变量名。然后需要再使用变量名调用相对应的资源地址。

1. 声明变量名(可以放在文件开头的位置，他们是不会显示的)，变量名是十分随意的数字、字母、中文都可以

[变量名]: 资源位置
[baidu]:https://www.baidu.com/
[我的首页]:https://luanshizhimei.github.io/
[图片]:img/01.jpg

2. 调用的时候就方便多了

[点击就跳转百度][baidu]
![图片说明][图片]

七、表格

markdown 表格是十分可视化的，大体来讲就是采用 | 来区分单元格。

第一行是表头，第二行是控制单元格的居中方式采用了:-(左对齐),-:(右对齐),:-:(居中)来调整。

其中的 - 数量不限。

| 左对齐 | 右对齐 | 居中对齐 |
| :-     | -:    | :-:    |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

八、行内元素

斜体语法：选择你需要强调的部分周围打上一个 *。

粗体就是：选择你需要强调的部分周围打上二个 *，具体如下：

这里是 * 斜体 *  
这里是 ** 粗体 **

九、HTML

实际上 md 使用采用 HTML 渲染的，所以可完全兼容 HTML 代码。但是我觉得插入 HTML 就违背了 md 的主旨了：我们只关心写作，排版格式一边去。

当然必要的时候加入 HTML 代码还是对于某些特殊环境下有帮助。（如文字居中等）

最后使用 md 时请注重语义，而不是他的效果（效果我们可以自定义）

深入学习 Mark

以上 7 条是我总结的最常用部分（基本就够用，但有必要还是学习一下流程图和数学公式），学无止境如果你还想深入了解的话，可以看看如下网站：

Markdown 编辑器教程 – 老杨

Markdown 中文网站

随便再推荐几个 VS Code 关于 MarkDown 好用的插件。

1.Markdown All in One

提高输入效率的插件：代码补全，快捷键等超方便的功能。

Markdown All in One

2.PicGo

一个方便的上传图片到图床的插件，默认图床 SM。国内访问 Github 有时会比较慢，就建议绑定国内的图床，如千牛、微博之类的。

PicGo

（三）、生成静态网页 / 本地浏览

等你写好一篇博客之后就可以生成 (generate) 网页，也就是将你的 md 文件或其他页面文件转换对应的 html 网页，命令如下：

hexo g

完成上一步之后就可以启动 hexo 服务(server)，实现本地浏览，命令如下：

hexo s

值得一提的是启动 Hexo 服务之后。是可以动态监测你的修改，你修改 md 文件也会修改网页。（按 F5 刷新就可以看到）

第三步、发布 Blog

当然我们的目的是为了发布到网络，这里我演示使用 Github page 的方式发布。要注意的是 Github 是禁止了百度爬虫的所以是不能被收录的，个人觉得目前最好解决方案是 Coding 和 Github 的双部署.

（一）、创建仓库

  1. 首先你需要一个 Github 账号（这不是废话吗？）。
  2. 找到右上角的 + 点卡，找到 New repository(新仓库)。
  3. 在 Repository name(仓库名称)中输入你的 blog 名称，注意这里是仅支持下划线和英文（相当于域名），最后末尾加上.github.io 表示启用 Github page 服务，当然这也不一定我们可以手动开启 Github page 并指定一个域名，但图个方便就用这个办法吧。
  4. 最后点 Create repositor，创建仓库。

（二）、Git 安装和配置

  1. 下载并安装 Git（一路点 yes 选默认参数就可以）

    Git 下载地址：https://git-scm.com/downloads

  2. 打开 Git Bash(Git 命令行版本)，先要绑定你的账号和邮箱（为了区分是谁的代码），命令如下：

    git config --global user.name "你的名字"
git config --global user.email "电子邮箱"

  3. 然后再生成 ssh key（这个相当于你的电脑和 github 通信的 ” 钥匙 ”），命令如下：

    ssh-keygen -t -rsa -C "你的邮箱"
  4. 之后会提示你输入，不用管连按三次回车。（默认大法好）
  5. 然后找到 C:Users 你的用户名 \.sshid_rsa.pub，用记事本打开并复制全部内容。
  6. 在 SSH and GPG keys 页面中，点 New SSH key(新建密钥)。
  7. Title(标题)就填你的电脑名称就好，Key(密钥)就填刚刚复制的 id_rsa.pub 文件的内容，最后点 Add SSH key(新增密钥)就完工。

（三）、发布网站

  1. 重新回到 Vscode 打开 blog 项目界面，打开终端。(Ctrl + shift + `)

  2. 安装一个 hexo-deployer-git 的插件，命令如下：

    npm install hexo-deployer-git --save

  3. 我们还需要设置博客根目录下_config.yml，在最末尾的 #Deployment 那个部分设置为下面这段。

    # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: git@github.com:luanshizhimei/luanshizhimei.github.io.git,master

    这里 git@这段是你的 git ssh 链接。获得的办法：

    1. 点开你的仓库 —— Clone or download —— 复制那段 git 开头的代码，最后在末尾补上,master，表明你是发布在主线上。
    2. 或者将上面第一个 luanshizhimei 改成你的 Github 账号名，二个 luanshizhimei 改成你的仓库名

  4. (可选)之前提到了关于双部署，在 coding 同样创建一个 Git 仓库，然后绑定 ssh key 过后，同样在_config.yml 中增加类似这样一句。

    coding: git@e.coding.net:luanshizhimei/myblog.git,master

  5. 最后我们在终端中输入发布命令（deploy），即可完成部署：

    hexo d
  6. 等待几分钟，Github 用户在浏览器地址输入你创建仓库名称（我的就是 https://luanshizhimei.github.io），就可以查看你部署成功的博客了！（coding 你需要在网站看它给你是什么域名）

结语

想必能看到这里的朋友大概了解我写博客的尿性——巨废话。

我希望通过这种唠唠叨叨方式尽可能说到新手朋友们可能会遇到的问题减少不必要的踩坑。

由于个人见识短浅，还有很多错误或者更好的方法并未发现，还有望各位大佬们能提出珍贵的批评和意见。

欢迎大家有什么疑惑的加我企鹅 1095289701，私信我经常看不到。（系统背锅 + 烂癌患者）

下一篇是关于主题简单美化和插件安装，各位再见～

Hexo 搭建网站学习笔记（二）—— 主题美化

退出移动版