github+hexo简单搭建个人博客

前言：搭建个人博客也是心血来潮，很久之前就看到别人的博客很清新、简约、大气、时尚又装逼，嘿嘿。。。就想着自己折腾一个，奈何当时技术能力有限，连github都玩不转，当然以失败告终，最近又头脑发热，遂百度了n多资料，又开始了填（bei）坑(nue）之旅，而且能找到的资料大多仅仅就是搭建起来，作为一个强迫症患者，肯定不能忍受没有优化过的样子，所以本着搭建一个完整的博客并记录优化过程，如果你喜欢我博客的样子，参考此教程一定能够搭建起来差不多的样子。

我的博客：https://pythontaotao.github.io/

什么是hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装git

• Windows：下载并安装 git.

• Mac：使用 Homebrew, MacPorts 或者下载 安装程序。

安装Node.js

下载地址：win 10下载v 14.4.0 win 7下载v 12.18.0

安装时，请勾选Add to PATH选项，其他步骤不明白可以百度安装教程

查询版本如上，说明安装OK

安装Hexo

npm install -g hexo-cli

npm是NodeJS包管理工具，类似于python的pip

在本地搭建个人站点

4.1、新建一个文件夹，位置和名称都没有限制，我们这里新建D:/hexo

4.2、使用git的命令行工具，初始化文件夹（选中hexo文件夹，右键Git Bash Here）

$ hexo init hexo
输出信息如下
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into 'D:\hexo-new'...
remote: Enumerating objects: 165, done.
remote: Total 165 (delta 0), reused 0 (delta 0), pack-reused 165
Receiving objects: 100% (165/165), 31.30 KiB | 124.00 KiB/s, done.
Resolving deltas: 100% (79/79), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'D:/hexo-new/themes/landscape'...
remote: Enumerating objects: 4, done.
remote: Counting objects: 100% (4/4), done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 1067 (delta 0), reused 0 (delta 0), pack-reused 1063
Receiving objects: 100% (1067/1067), 3.22 MiB | 27.00 KiB/s, done.
Resolving deltas: 100% (585/585), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

> ejs@2.7.4 postinstall D:\hexo-new\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 253 packages from 450 contributors in 30.278s

5 packages are looking for funding
  run `npm fund` for details

INFO  Start blogging with Hexo!

.
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json

初始化完成后会看到有以上文件内容，就是我们博客的初始化文件

cd hexo
npm install

npm install=npm i。在git clone项目的时候，项目文件中并没有 node_modules文件夹，项目的依赖文件可能很大。直接执行，npm会根据package.json配置文件中的依赖配置下载安装

在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。

为了描述方便，在以下说明中，将前者称为 站点配置文件， 后者称为 主题配置文件。

4.3、在本地进行测试

$ hexo g
$ hexo s
Hexo is running at http://localhost:4000 . Press Ctrl+C to stop  

在浏览器输入http://localhost:4000，可以看到hexo博客最原始的样子

4.4、hexo相关指令讲解（熟悉的小伙伴可以跳过这里）

a、init

$ hexo init [folder]

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

b、new

$ hexo new [layout] <title>

$ hexo new "post title with whitespace"

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

c、 generate

$ hexo generate      生成静态文件。简写 $ hexo g

选项	描述
-d, --deploy	文件生成后立即部署网站,简写 hexo d

d、server

$ hexo server       启动服务器。默认情况下，访问网址为： http://localhost:4000/ 
                    简写 $ hexo  s

e、version

$ hexo version      显示Hexo 版本

修改配置文件，关联github上

5.1、先创建github的仓库，仓库名称前缀要和你的github名一样，忽略我这里的大小写问题，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fv64QYvv-1593412817495)(https://i.loli.net/2020/06/29/q5CLzAfMDK6WFsa.png)]

新建成功后，复制仓库的ssh地址，后续修改配置文件需要使用

5.2、安装和切换主题，重点来了哦！！！

首先我们要找到自己喜欢的主题，在github上面搜索hexo-them，比较受欢迎的是Next和yilia这两个主题，以Next主题为例，如果你喜欢其他主题，也可以设置相对应的主题

$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

安装完成后可以看到themes文件夹下面多了一个ngxt的文件夹，这个就是我们下载的next主题

5.3、修改主题配置文件，需要懂一些yaml的语法知识，不懂得自行百度下

hexo/_config.yml     #这个文件是整个博客站点的配置文件

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next                            #使用next主题,这个相当于一个主题切换控制开关

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:                                #将我们本地的代码部署到刚刚创建的仓库中
  type: 'git'
  repository: "git@github.com:pythonTaotao/pythonTaotao.github.io.git"
  branch: master

修改后在本地先测试一下

hexo g
hexo s

激动人心的时刻到了，上面就是我们最原始的next主题的样子，这个博客在本地测试已经没有问题了，现在要把它部署到github上面

5.4、发布博客

npm install hexo-deployer-git --save
hexo g
hexo d

部署完成后，在github的setting中 可以看到自己的博客地址

最后

至于最后发布文章和自定义各种不同的主题，可自己去探索，至此所有的步骤都已经讲完，希望对你有所帮助。如遇到bug可留言。感谢阅读。下一节讲解如何美化我们搭建的hexo博客