刚刚搭建好个人博客,趁着三分钟热度,记录下用hexo搭建博客的过程。总结学习~

hexo简介

先放上hexo的文档吧:hexo文档

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

hexo有很多现成的主题,可以直接使用,一般只需要学习一下主题相关的配置即可。从而简化了自己搭建整个网站的过程。使得我们可以更加专注于文档的写作。

hexo安装

安装hexo之前,需要先安装如下应用:

  1. Node.js
  2. Git

这里我安装的版本为Nodejs: v10.16.3,Git:v2.22.0。
在装好Node.js和Git之后,一般都会自动配置好环境变量。如果没有配好环境变量的话,只需将下面两个路径添加到系统变量path中:

1
2
nodejs安装路径(也就是node.exe所在文件夹)
Git安装路径\cmd

装好上面的应用之后,只需在cmd中使用指令:
npm install -g hexo-cli
等待安装好即可。

hexo建站流程

执行下面的命令,hexo会自动建立所需要的文件。

1. 建站

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

生成的文件夹如下
.
├── _config.yml
├── package.json
├── scaffolds
├── source
├ ├── _drafts
├ └── _posts
└── themes
其中

  • config.yml是网站的一些配置信息
  • scaffolds存放的是网站页面的一些模板
  • source中存放我们的文章,drafts中是草稿,不会显示在网站上,posts中是发布的文章,会显示在网站上。
  • themes是主题。我们更换主题话,只需要将下载下来的主题文件夹放到themes下,然后在config.yml文件中修改theme:的值即可。

2. 选用喜欢的主题

hexo有许多现成的漂亮的主题可以使用。hexo主题
选择合适的主题,一般只需要把选择的主题下载下来,然后将主题文件夹放到站点的themes文件夹下,再在_config.yml中将theme项的值改为主题名即可(即themes文件夹中的主题文件夹名)。
然后对于主题的各种配置,则需要看主题的readme介绍,根据相应的介绍修改为自己的信息即可。

3. 写文章

使用如下命令,可以新建一篇文章:
hexo new [layout] title
注意,该命令(包括下面所有命令)必须在站点对应的文件夹下执行,也就是init操作中的folder中。
如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,使用引号括起来。
这样会在source\_posts中生成一篇对应标题的文档。在该文档中使用markdown编辑即可。
另外,使用上述new命令和直接在source\_posts\目录下新建一个文档效果都是一样的。只不过使用new命令新建的文档会使用模板(scaffolds中)。

4. 生成静态页面及本地预览

写完文章之后,保存。使用如下命令生成静态页面:
hexo generate
另外,如果在写文章的过程中不想每次修改完文章都重新生成一次,可以执行如下命令:
hexo generate -w
监控状态,每次文档有变化会自动重新生成。

另外如果想本地预览文章,可以使用命令 hexo server 启动本地服务器,然后访问 localhost:4000 即可本地预览文章。

5. 发布

理论上我们可以直接将生成的public文件夹直接上传到github上即可。
或者使用git上传效果都一样。
不过为了方便,我们可以设置站点的_config.yml配置文件,编辑里面的deploy项:

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

然后就可以直接使用 hexo deploy 命令直接将生成的页面发布到github上。

至此,一个简单的建站过程就完成了。另外对于hexo的使用,还有许多其他功能,这里就不一一介绍,hexo文档中介绍的也非常详细,可以随时查阅。

博客搭建只是一个小开始,搭建完成之后的任务才是重点:后面要努力坚持写文章,坚持更新,督促并及时记录学习过程,正如古人云:good good study, day day up!!这才是更重要的任务。

最后放个参考文章:https://www.jianshu.com/p/1c888a6b8297?utm_source=oschina-app
感谢~~