Star’s Tech Blog

框架驱动：Hexo

博客主题：NexT ^7.x

博客搭建与配置

环境准备

Hexo 搭建

安装 Hexo，打开 Git Bash 命令窗口，输入命令：

npm install -g hexo-cli

安装好 Hexo 后，在任意目录新建一个空文件夹，名字可以为 blogs，然后进入这个文件夹，在命令行输入命令：

hexo init

执行完成后（如果命令窗口出现橙色的 WARN 不用管），生成文件结构：

├── node_modules       //依赖安装目录
├── scaffolds          //模板文件夹，新建的文章将会从此目录下的文件中继承格式
|   ├── draft.md         //草稿模板
|   ├── page.md          //页面模板
|   └── post.md          //文章模板
├── source             //资源文件夹，用于放置图片、数据、文章等资源
|   └── _posts           //文章目录
├── themes             //主题文件夹
|   └── landscape        //默认主题
├── .gitignore         //指定不纳入git版本控制的文件
├── _config.yml        //站点配置文件
├── db.json            
├── package.json
└── package-lock.json

下载依赖包，输入命令：

npm install

依赖包下载完成后，输入如下命令启动 hexo 的内置 Web 服务器：

hexo g // 打包文件

hexo s // 启动服务器

然后可以在在浏览器中通过地址 http://localhost:4000/ 访问博客了。

更换 NexT 主题

Hexo 更换主题的方式很简单，只需要将主题文件拷贝至根目录下的 themes 目录中， 然后修改根目录下 _config.yml 文件中的 theme 字段，便可完成更换。

在博客项目的根目录下，输入命令：

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

打开根目录下 _config.yml 文件,将 theme 字段的值修改为 next。

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

这个时候需要重启服务器 hexo g && hexo s 并刷新才能使主题生效。

重要定义

在项目文件中存在两个 _config.yml 文件，为了方便区分。

  • 项目根目录下的 _config.yml 文件叫作站点配置文件。

  • 主题文件夹根目录下的 themes/next/_config.yml 文件叫作主题配置文件。

部署到 GitHub Pages

GitHub 配置

  • 创建 GitHub 账号

  • 创建仓库，仓库名必须是：<GitHub 账号名称>.github.io，这是GitHub pages 的特殊命名规范

修改站点配置文件 _config.yml

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: 'git'
  repo: https://github.com/<GitHub 账号名称>/<GitHub 账号名称>.github.io.git
  branch: master

注意：GitHub pages 仅在 master 分支下实现。

部署

  • 在项目根目录下，安装 Git 部署插件：
npm install hexo-deployer-git --save
  • 部署到 Github Pages
hexo g 

hexo d

部署完成后，在浏览器访问网址：https://<Github账号名称>.github.io 即可查看博客。

详细过程可以参考：借助 GitHub pages 搭建静态个人网站并绑定域名