个人博客搭建历程

发表于 | 分类于

No description provided.

基础环境搭建

安装Node.js

安装Git

本地博客搭建(hexo: v3.3.9, os: win7)

打开git bash，依次输入以下指令：

1
2
3
4
5
1. npm install hexo-cli -g // 安装hexo命令行工具
2. hexo init E:/githubBlog // 在E盘下创建githubBlog文件夹，并用hexo初始化
3. cd E:/githubBlog // 将路径切换至githubBlog文件夹
4. npm install // 安装依赖（其实第二步中的初始化过程已经包含了这一步）
5. hexo server // 启动本地服务器

至此，本地的博客站点已经搭建完成，可以在地址栏中输入”localhost:4000”进行访问。
githubBlog文件夹的目录结构如下所示：
初始目录结构.JPG
目录解析：

  • node_modules文件夹存放相关的依赖。
  • scaffolds文件夹存放模板文件。（新建文章时，Hexo会根据它来建立文件。）
  • source文件夹存放资源文件。(资源文件夹是存放用户资源的地方。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。)
  • themes文件夹存放主题文件。(Hexo 会根据主题来生成静态页面。)
  • .gitignore文件记录不需要进行版本管理的文件。(被忽略的文件通常有几类：操作系统自动生成的文件，编译生成的中间文件、可执行文件，带有个人敏感信息的配置文件)
  • _config.yml文件记录网站的配置信息
  • db.json文件用于生成缓存文件
  • package.json文件记录应用程序的信息

部署环境搭建

安装hexo-deployer-git

使用git bash输入以下指令：npm install hexo-deployer-git --save

创建github仓库

在GitHub个人账号上创建一个新仓库，仓库必须命名为username.github.io（username指的是你的用户名）

配置_config.yml文件

在_config.yml文件最后的几行代码改为：

1
2
3
deploy:
  type: git
  repo: <repository url>

repository url指的是上一步中创建的github仓库的地址，例如，我个人的配置如下：

1
2
3
deploy:
  type: git
  repo: https://github.com/ZRC-Struggling/zrc-struggling.github.io.git

至此，部署环境已经搭建完毕，接下要开始写博客了。

写博客

具体流程如下：

  1. 创建草稿(hexo new draft 第一篇文章)
  2. 打开“第一篇文章.md”，开始写写写…
  3. 启动本地服务，预览(hexo server –draft)
  4. 符合要求，发布草稿(hexo publish 第一篇文章)
  5. 生成静态文件(hexo generate)
  6. 部署到线上去(hexo deploy)

快捷流程如下：

  1. hexo n 第二篇文章
  2. 打开“第二篇文章.md”，写写写…
  3. hexo s -o
  4. hexo g
  5. hexo d

快快捷流程如下：

将写好的文件放到_post文件夹下 -> hexo g -> hexo d（OK了）
至此，写博客之旅已经可以开始了…具体的语法细节多看官网跟其github仓库就行了, 文末附有几个有用的链接。

常见问题解答方案

  1. Q: 输入hexo server后在4000端口并没有显示网页。有时会循环打印HEART，这是怎么回事？
    A: 该端口被占用了。可以通过hexo server --port portname或者hexo s -p portname来修改端口号，例如’hexo s -p 5001’。
  2. Q: 为什么安装好Hexo后source下只有_posts目录？没有_drafts.
    A: 默认生成的source文件夹是没有_posts目录的。当使用hexo new draft somepost后，就会在source文件夹下自动创建_drafts目录，并在该目录下生成somepost.md文件
  3. Q: 显示草稿：hexo –draft 为什么执行不了？
    A: 配置文件_config.yml中，默认将render_drafts设为了false，即在站点中不显示草稿。为了预览草稿的效果，可以使用hexo server --draft来启动本地站点，这样草稿就可以在本地预览了。当然，也可以直接将配置文件中的render_drafts设置为true，不过这样做的话，草稿状态意义就不大了。
  4. Cannot GET /tags/?

附录

Hexo的命令行用法：

Usage: hexo <command>

命令 描述
clean Remove generated files and cache
config Get or set configurations
deploy Deploy your website
generate Generate static files
help Get help on a command
init Create a new Hexo folder
list List the information of the site
migrate Migrate your site from other system to Hexo
new Create a new post
publish Move a draft post from _drafts to _posts folder
render Render files with renderer plugins
server Start the server
version Display version information
全局配置 描述
–config Specify config file instead of using _config.yml
–cwd Specify the CWD
–debug Display all verbose messages in the terminal
–draft Display draft posts
–safe Disable all plugins and scripts
–silent Hide output on console

参考文档