手把手教你搭建属于自己的hexo博客系统

166 阅读3分钟

一直想拥有自己的个人博客,心血来潮找了网上的教程,不需要购买云服务器,折腾了半天,终于顺利实现了,还是挺开心的,下面我来和大家分享下我的心得。

1 Hexo 简介

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

  • 超快速度—Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  • 支持 Markdown—Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  • 一键部署—只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
  • 丰富的插件—Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

2 安装 Hexo 前的准备工作

安装 Hexo 其实非常简单,但是在安装前需要安装下面的程序:

  • Node.js (nodejs 6.9 版本及以上)
  • Git(Git 教程推荐廖雪峰的教程,里面对于 Git 的用法做了很详细的介绍。)

安装成功之后,在 win 中的 cmd 里运行下列命令行:

C:\Users\noarark>git --version
git version 2.19.2.windows.1

C:\Users\noarark>npm -v
6.9.0

3 安装 Hexo

所有必备的应用程序安装完成后,即可使用npm install -g hexo-cli安装 Hexo。这里采用阿里的国内镜像源安装 cnpm。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

运行cnpm -v,如果显示版本号则说明安装成功了。 接着就可以用cnpm install -g hexo-cli来开始正式安装 Hexo 了。

安装好 Hexo 之后可以用hexo -v 来查看下安装的版本号及其他信息。

hexo-cli: 2.0.0
os: Windows_NT 10.0.18362 win32 x64
http_parser: 2.8.0
node: 10.16.2
v8: 6.8.275.32-node.54
...

4 建立站点

安装完Hexo后,在电脑里新建一个文件夹,用于存放自己的博客文件。这里我在 D 盘的 CS 目录下新建一个文件夹命名为 blog ,进入这个文件夹,运行hexo init初始化文件夹,然后输入cnpm install安装必备的组件。

D:\CS\blog>hexo init
D:\CS\blog>cnpm install

新建完成后,指定文件夹的目录如下:

.
├── _config.yml ---网站的配置信息,可以配置大部分参数
├── package.json---应用程序的信息
├── scaffolds------模板文件夹
├── source---------资源文件夹是存放用户资源的地方
|   ├── _drafts
|   └── _posts
└── themes---------主题文件夹

本地的网站配置也就完成了,输入hexo g(或者hexo generate) 生成静态网页,然后输入 hexo s(或者hexo server) 启动本地服务器,然后浏览器输入http://localhost:4000 ,就可以看到我们的博客啦,效果如下:

看到这个是不是很开心~~~

部署到远程仓库

这样,博客在本地就搭建完成了,现在要将其部署到远程仓库,这样其他人才能访问到我们的博客。首先需要注册 Github 账号,然后新建一个仓库,如下图所示,其中 YourGithubName 是 Github 的用户名。

需要安装部署的扩展插件,命令行中输入:

cnpm install --save hexo-deployer-git

打开博客根目录下的_config.yml文 件,修改有关部署的配置:

deploy:
  type: git
  repository: https://github.com/YourGithubName/YourGithubName.github.io
  branch: master

发布博客

创建一篇新的博客,在命令行输入

hexo new "my new post"

然后进入博客存放的目录,例如我的是D:\CS\blog\source_posts,可以发现文件夹下多了一个my-new-post.md这个文件,这个就是创建的博客文件。

当编写完博客后,在命令行输入hexo clean(清除站点文件),再用hexo g重新生成静态文件,之后输入hexo s 可以预览本地效果,最后用hexo d推送到远程仓库中。这时打开github.io主页就能看到发布的文章啦。