搭建自己的博客

发表于 更新于 分类于

在上大学之前，一直以来的梦想是拥有一台属于自己的电脑。这个梦想在步入大学生涯之后得以实现。然而不知不觉却失去了许多。比如，每当窗外大雨磅礴的时候，心也共鸣似的跟着天空哭泣。我曾经以为是我成熟了，终于摆脱了那种令人心情不快的忧郁，其实我是失去了对自己分析内心的能力，失去了用文字表达感情的习惯，失去了和TA交流心绪的机会。失去的已经永远的失去了，可我还能重新开始。我将以这一篇毫无技术含量的技术文章开始新的征程。

准备工作

官方文档

Node.js

Node.js下载地址
LTS为长期更新版本，Current为最新版本，看个人喜好了。下载完双击安装即可
在Custom Setup这一步记得选择Add to PATH，可以自动配置环境变量。

Git

Git下载地址
下载完双击安装即可
建议选择最新版本，本人就因为Git的版本难问题，在Deploy的时候纠结了老半天，最后在Github上搜索到了原因——因为Github更新了Git版本，更新了Git就解决了(还是听从了官方的建议，遇到问题请时候用在Google或者Github上搜索，百度搜索技术问题是真的不靠谱)

安装Hexo

确保你已经完成了准备工作
以下是安装命令

1
$ npm install -g hexo-cli

或者

1
$ npm i -g hexo

i 是 install npm命令的简写，hexo和hexo-cli的区别不是很清楚，就网上结果看来是都可以的

初始化Hexo

可以在指定目录中新建一个用来存放个人博客数据的文件夹，在该文件夹中右键点击Git Bush Here 然后使用命令

1
hexo init

或者使用命令

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

在指定文件夹中初始化

新建完成后，指定文件夹的初始目录如下

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的配置信息，详细内容参考官方文档中的配置部分

package.json

应用程序的信息。其中EJS, Stylus 和 Markdown renderer 为默认安装。可以根据需要增加或者删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.6.0"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.2"
  }
}

scaffolds（模板）

当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的markdown文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

source（资源）

存放用户资源的地方。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes（主题）

Hexo 会根据主题来生成静态页面。

搭桥到Github

  • 新建一个Github账号
  • 创建一个repository（仓库），形如XXX.github.io,其中XXX为你的github名称
  • 配置Git环境
1
2
$ git config --global user.name "XXX" #设置全局用户名
$ git config --global user.email "XXX@example.mail" #设置全局邮箱
  • 创建SSH
    windows的命令行没有自带ssh工具，直接用GitBash比较方便。使用命令
1
$ ssh-keygen -t rsa -C "youremail@example.com"

根据生成信息，在对应文件夹中找到id_rsa.pub，在github中依次点击头像->settings->SSH and GPG keys->New SSH key，将文件的内容复制到github中。

本地发布

使用命令

$ npm i hexo-server

安装server模块

使用命令

1
2
3
$ hexo clean #清除相关文件
$ hexo generate #生成相关文件
$ hexo server #本地发布

进行本地发布，然后就可以在浏览器中输入http://localhost:4000看到本地版个人博客了

上传到Github

配置发布信息

在创建的博客文件夹中，打开 _config.yml，按照以下形式配置

1
2
3
4
deploy:
  type: git
  repo: https://github.com/XXX/XXX.github.io.git
  branch: master

使用命令

npm install hexo-deployer-git --save

安装deployer-git模块

使用命令

1
2
3
$ hexo clean #清除相关文件
$ hexo generate #生成相关文件
$ hexo deploy #发布并上传

发布并上传，然后就可以在浏览器中输入http://XXX.github.io看到发布在Internet上的个人博客了！