使用 Hexo 搭建自己的博客

使用 Hexo 搭建自己的博客

Hexo 是一个非常流行的静态站点生成工具,它可以把 Markdown 文档快速的解析成漂亮的静态页面,支持各种主题,让用户专注在写作上。

本文选自 《了不起的Markdown》,作者:毕小烦

了不起的 Markdown

我们可以使用 Hexo + Github 搭建自己的博客(免费的),还可以绑定自己的域名。

搭建步骤:

  • 搭建本地写作环境
  • 创建 Github Pages
  • 绑定自己的域名
  • 优化博客

搭建本地写作环境

环境配置

安装 Node.js

Hexo 是使用 Node.js 开发的,所以一定要安装 Node.js 先。

安装 Git

版本管理使用 Git,以后使用 GitHub 托管页面也要使用到 Git。

安装 Hexo

# 安装 hexo 命令行工具
$ npm install hexo-cli -g

创建项目

# myblog 为空,初始化文件夹 myblog 
$ hexo init myblog
$ cd myblog
$ npm install

本地预览

# 相当于 hexo generate,生成的静态站点放在 public 目录下面
$ hexo g
# 查看目录结构
$ tree -L 1
.
├── _config.yml  # 网站配置文件
├── db.json
├── node_modules
├── package-lock.json
├── package.json  # 应用程序信息
├── public  # 静态站点存放于此
├── scaffolds  # 模板文件夹,新建文章时会使用此文件夹下的文件作为模板
├── source # 存放用户资源的地方
├── themes  # 主题
└── yarn.lock

# 相当于 hexo server,启动服务,本地预览
$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

打开 http://localhost:4000/ ,查看效果。

这里写图片描述

新建文章

# 新建一篇文章,名为 test,默认会放到 source/_posts/ 下。
$ hexo new test
INFO  Created: /Volumes/warehouse/myblog/source/_posts/test.md

# 查看 test.md 
$ cat source/_posts/test.md
---
title: test
date: 2018-01-02 19:40:10
tags:
---

# 编辑 test.md ,添加 ## 我是用来测试的 
# vim source/_posts/test.md

$ cat source/_posts/test.md
---
title: test
date: 2018-01-02 19:40:10
tags:
---

## 我是用来测试的

$ hexo g
$ hexo s

打开 http://localhost:4000/,效果如下:

这里写图片描述

创建 Github Pages

很多人都使用 GitHub Pages 来搭建博客,原因是它的空间免费而且稳定,同时又有那么多的最佳实践,所以推荐之。

本文选自 《Markdown实用指南》,作者:毕小烦

如何搭建自己的 GitHubPage 呢?

STEP 1. 在 Github 上创建一个仓库,名字为 username.github.io,请注意,username 是你 GitHub 的用户名。

如下图所示:

这里写图片描述

目前还没有内容,当推送内容后,就可以通过 http://bxiaopeng.github.io/ 访问了。

STEP 2. 把 Hexo 生成的静态页面推送到 Github

2.1 修改 _config.xml:

deploy:
  type: git
  repo: https://github.com/bxiaopeng/bxiaopeng.github.io.git
  branch: master

2.2 执行部署命令:

# 执行部署命令
$ hexo d
ERROR Deployer not found: git
# 如果报上面的错误,需要安装一个插件 hexo-deployer-git
$ npm install hexo-deployer-git --save
+ hexo-deployer-git@0.3.1
added 16 packages in 8.573s
# 再次部署
$ hexo d
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
On branch master
nothing to commit, working tree clean
To https://github.com/bxiaopeng/bxiaopeng.github.io.git
 + 7a3e722...0f2a5c0 HEAD -> master (forced update)
Branch master set up to track remote branch master from https://github.com/bxiaopeng/bxiaopeng.github.io.git.
INFO  Deploy done: git

打开 http://bxiaopeng.github.io/ 查看效果:

这里写图片描述

绑定自己的域名

STEP 1. 添加域名解析

拥有自己的独立域名好处多多,怎么注册申请我就不多说啦,我用的是阿里云的,就以此举例吧。

这里写图片描述

这里写图片描述

STEP 2. 绑定独立域名

# 切到 source 目录
$ cd source 
# 新建一个 CNAME 文件
$ touch CNAME
# 编辑 CNAME,添加域名,如我的是: www.bixiaofan.com

$ hexo g

# 部署到 GitHub
$ hexo d

STEP 3. 查看效果

打开 www.bixiaofan.com 就可以正常查看页面了。

更多请查看 《了不起的Markdown》,作者:毕小烦

了不起的 Markdown

©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页