hexo博客 | 简单搭建hexo博客

前言

之前出的搭梯子教程被封了，于是传在个人网站：
https://lixupeng.cn/blog
有兴趣可以动手玩玩，
那么这里就对自己搭建网站作以记录，
供大家参考。
个人主页：
https://lixupeng.cn
https://www.lixupeng.cn

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

详情见 https://hexo.io/zh-cn/docs/

教程

安装Node.js和Git

直接在网上搜索 nodejs 和 git 即可，windows 下载安装包安装，mac/linux 直接命令安装
需要注意的是，node 版本不能过高，大概大版本为 12.xx.xx 即可
如果本地需要别的 node，那么可以使用 nvm 管理 node 版本，windows 有 nvm for windows 版

安装hexo-cli

1	npm install hexo-cli -g

创建Github仓库

此次建站采用GitHub托管我们的网站，我们需要新建一个代码仓库。

GitHub目前对免费用户开放了私密仓库，但免费用户的私密仓库不支持GitHub Pages，这里选择public

1.注册github账号

前往github.com按步骤注册账号

2.创建仓库

名字可以用 xxxxx.github.io ,方便后续直接生成网页

点选生成 README.md 文档，这个文档是自己编写，介绍你这个仓库项目是干嘛的，这里用来初始化仓库

3.克隆到本地编辑

下方图片因为没有更新，名字还显示原来的。如果是作为个人主页的博客，建议还是xxxxx.github.io这种格式，到时候github pages直接会用https://xxxxx.github.io作为个人网址

当然你如果想自定义主页，然后将博客作为主页下的一个分支，且在不买域名的情况下，博客的仓库名就可以自定义（如blog）,而自定义主页的仓库名命名为 xxxxx.github.io

这里可以使用github下的atom编译器，也可以使用功能更加强大的VS code，当然也可以选择直接在终端用vim编写文章，不过要是你会vim等操作命令，那就基本不用看我的教程了..

4.打开保存在本地的仓库（文件夹）

等下就会用到VS code进行编辑，而且VS code内自带终端，就不用外边打开cmd/poweshell/git bash了

安装Hexo

打开你刚才clone到本地的 xxxxx.github.io` 文件夹，这时会看到.git文件夹，表示git在此文件夹内工作，如果未看到就按下图设置一下

在xxxxx.github.io文件夹内创建docs文件夹

进入docs文件夹，鼠标右键打开git bash

输入：

hexo init

可以看到start blogging with hexo,即安装完成

这时我们可以接着输入：

1	hexo server

即可按提示在 http://localhost:4000 看到博客已生成，上边安装介绍hexo默认安装landscape主题，当然主题可以在hexo官网主题去自己选择

配置hexo

这时候再打开刚才的VS code，打开的是xxxxx.github.io文件夹，那么在界面的左侧栏就可以看见里边的所有内容，这时hexo文件已经全部生成完成，只需要我们自定义，以及写文章了

1.主要配置

打开docs文件夹下_config.yml文件，在右边编辑修改内容，将主题内容修改成自己的内容

这里要注意url
url即为你的主页地地址，xxxxx.github.io 仓库对应生成 https://xxxxx.github.io

root这里也默认 /
#而你若是将hexo博客作为自定义主页的一个分支，那么就需要改为：

1 2	url：https://xxxxx.github.io/blog root: /blog/

###注意config文加里的设置冒号后必须要有一个空格

2.装主题

这里推荐next主题，安装按next讲
next也是目前依旧在不断维护更新的一个主题
你也可以自己去选择主题

链接：https://hexo.io/themes/

安装细节一般主题都会有简介

在docs文件夹下打开终端(cmd/git bash)-文件夹内打开

或者直接在vs code内打开，不过需要从仓库文件夹下进入docs，输入指令：

cd docs

安装next主题输入：

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

更改docs文件夹内的_config.yml文件

找到theme ，改为next

保存更改，和之前一样输入命令：

1	hexo server

即可预览

上图选自https://theme-next.org/ 官网

一般新安装的只能看见hello world字样

对于博客主题的配置参见：

https://github.com/theme-next/hexo-theme-next

博文发布

1.文章

打开docs/source/_posts，里边的初始文章是一篇 helloworld.md , 你可以撰写自己的文章，发新文章的话直接在此文件夹下新建xxx.md，书写形式可以网上找寻markdown文件编辑教程，也可以参考我的下篇文章：

markdown编辑器使用

2.添加CNAME,提交推送至远端仓库

如果是要绑定自己的域名，那么就在VS Code左侧找到source文件夹，右键创建名为CNAME的文件(无后缀格式) 如果没买域名也可以直接用github.io给的，不用添加CNAME

在右侧写入你的域名(如lixupeng.cn),保存
再打开之前的github桌面软件，可以看到左栏有很多新的文件/改动的文件，这是需要在下边输入总结记录
再commit to master，提交至master分支，这时完成了本地仓库的提交。
接着点击push origin，推送至远程仓库(新的都会显示push)

3.发布文章

返回vs code界面，

打开/docs/_config.yml,配置最下边的deploy设置

repo 后为你仓库的地址，后边接.git

在终端下/docs/路径输入：

1	npm install hexo-deployer-git --save

安装 hexo-deployer-git发送工具

完成后输入：

1
2
3

hexo clean
hexo generate 
hexo deploy

generate表示将博客已经生成html页面

deploy表示将生成的博客推送到了远程的仓库

所以此时不需要再在github desktop提交推送

而且以后修改发文章只用hexo g 与hexo d 即可

配置完成。

开启网站

打开github上你博客的仓库settings

在下边开启GitHub pages，如果有域名就在下边保存

#没域名的在这里已经完成啦！

你的网站已上线！

#有域名的同学请到域名购买商解析域名到 xxxxx.github,io

那么我这里用的是lixupeng.cn,就用@

大功告成，博客上线！

btw，以下是一个博主说的…表示很不能理解

我觉得给外行来讲，虚拟主机这个概念更不好理解

在虚拟主机架设也不好操作，如相当简易的typecho博客，号称仅几百k，但是又要配置好环境，需要在虚拟主机安装nginx/apache2+mysql+php，这些里边又分很多类，直接操作也是相当麻烦，理解每一个概念也不容易，一个配置不好就全部凉凉，而且用完一年免费的又得花钱，还是gayhub好
不过上述在服务器端架设博客，如typecho/wordpress其实也都是有环境搭建包的，就像本文的巧克力，一部部署。

总之，看个人需求吧

前言

教 程