使用Node.js+Hexo+Github搭建个人博客

一、为什么要花时间去搭建个人博客?

首先说说为什么我想要尝试着去搭建属于自己的Blog,古人云:“好记性不如烂笔头”。一开始我把笔记做在本子上、电脑上,发现要用的时候特别地不方便,而且越记越多、越多越杂。于是将其整理到有道云笔记、百度网盘上,还有手机App可以随时记笔记、搜索查看,挺好。后来慢慢发现自己记的笔记其他人又看不到,不能更好地分享与交流,无意间看到《为什么你应该写博客》一文很是激励着我。所以,我注册了CSDNcnBlogsGithub,希望有自己的个人博客网站并且多向大牛们交流学习。废话不多说,咱们转入正题~

说明:该文章的内容介绍仅限 Windows 用户,Mac 及 Unix/Linux 用户请参考其他资料如:Hexo 文档

个人博客示例: Mauger`s Blog

更新于:2017/12/19 23:21

二、准备工作

1. Git 下载(Git for windows 国内下载)、安装(安装时请勾选Add to PATH选项)、配置生成SSH公钥

2. Github 账号申请配置SSH Keys

3. Node.js 下载安装

4. Markdown 下载安装

说明:本想着讲一下详细的下载、安装和配置工作,却发现还是官方文档说明更好,已附上相关链接。

三、HEXO 简介及安装使用

1. Hexo 简介

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

2. Hexo 安装

我的 Hexo 安装版本为:vs_3.4.3;Node.js 版本为:vs_8.9.3。安装 Hexo 之前请先确保 Git 及 Node.js 安装成功,接下来只需要使用 NPM 即可完成 Hexo 的安装。在计算机的某个盘符下(其他盘符/文件夹下亦可)新建文件夹 blog,进入到文件夹 blog 中使用 Git Bash (在任意位置单击右键,选择 “Git Bash Here” 即可)进行操作如下:

$ npm install -g hexo-cli

Hexo 更新至最新版本,命令如下:

$ npm update hexo -g

3. Hexo 初始化

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init blog
$ cd blog
$ npm install

输入以下命令生成静态页面:

$ hexo generate

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

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

接着输入命令启动服务:

$ hexo server

打印信息如下表示服务启动成功:

$ hexo server
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

然后在谷歌浏览器中访问:http://localhost:4000/,注意这里不能直接使用快捷键 Ctrl+C 去复制链接,需要单击鼠标右键选择复制或手动输入。注意看打印信息 Press Ctrl+C to stop. 所以你如果随手 Ctrl+C,服务就停了,也就无法访问了。如果操作无误且正确启动服务后仍无法访问,那么请您继续往下看:四、常见问题及解决方法)

或者(防止80端口被占用,更改端口号)

$ hexo s --p 8081
INFO Start processing
INFO Hexo is running at http://localhost:8081/. Press Ctrl+C to stop.

然后在谷歌浏览器中访问:http://localhost:8081/

4. Hexo 配置(_config.yml 文件)

title              网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说:America/New_York, Japan, 和 UTC 。 其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

其他相关详细配置信息请参考:Hexo 配置

5. Hexo 部署至 Github

首先需要在 Github 中新建仓库 new repository 为:【您的 Github 名称.github.io】,如:MaugerWu.github.io。然后修改 _config.yml 配置文件 ,打开文件后找到 deploy: 修改如下:(注意冒号后面有一个空格:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/MaugerWu/MaugerWu.github.io.git
branch: master
message:

编辑完成后进行保存,接着安装 hexo-deployer-git,命令如下:

$ npm install hexo-deployer-git --save

等待安装完成以后,执行如下配置命令:

$ hexo deploy

重新部署一下,命令如下:

$ hexo clean
$ hexo generate
$ hexo deploy

在正常部署完成的情况下,打开浏览器输入:【https://您的 Github 名称/github.io】进行访问,例如:https://MaugerWu.github.io。此时你会发现没有网站主题,只有文字没样式并不好看,于是乎,选择一个自己喜欢的 Hexo主题

  • AnimaStars - Add amazing star rotation animation to the official Landscape theme along with some changes on font and colors. - Demo
  • Coney - A theme based on Pacman,especially for Chinese! change the display style, add baidu share module, baidu search module, baidu analytics module, up to top button and so on. - Demo
  • Landscape-x - A fresh looking and responsive theme for Hexo, Modification of Landscape plus theme - Demo
  • Mala - I'm Magic Lamp, Dark theme, one key switch to White theme. Demo
  • NexT - High quality elegant theme. - Demo
  • Okcjs - Site with an animated banner based in the Landscape layout, but modified. Demo
  • Yilia - Responsive and simple style 优雅简洁响应式主题 - Demo(本人使用)

6. 关于主题更新

博主本次选择主题为: Yilia ,配置更新请参考:Jacman Theme

当你每次修改完文件夹 ../themes/yilia 下的配置文件 _config.yml 后,请进入到主题 yilia 下执行以下命令:

$ git pull

、常见问题及解决方法

1. http://localhost:4000/ 无法访问?

出现该问题的可能原因是端口号4000被占用,将 index.js 文件(若找不到该index.js文件,请参考我的另一篇博客:Everything 工具使用)中的端口号修改为:4001或者其他,重启服务后再次访问即可。

hexo.config.server = assign({
port: ,
log: false,
ip: '0.0.0.0',
compress: false,
header: true
}, hexo.config.server);

2. 博客出现中文乱码问题?

若出现该问题请使用编辑器 Notepad++ 或 Sublime Text2/3 编辑 _config.yml 文件,设置编辑器的编码为 UTF-8 后进行保存即可。

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/ # Site
title: Hexo 网站主标题
subtitle: 网站二级标题/副标题
description: 网站描述
author: 网站作者
language: 网站使用语言
timezone: 网站时区,Hexo 默认使用您电脑的时区

3. 博客访问中出现404错误?

若出现该问题,可能是在你修改 _config.yml 文件中 Hexo 主题后导致,比如将 theme: landscape 换成 theme: Next。

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

4. 修改个人博客根目录下的配置文件或主题下的配制文件 _config.yml,刷新页面后修改的地方没有生效?

首先进入到主题文件夹的目录下(如:../blog/themes/yilia/),执行命令:

$ git pull

然后返回到文件夹 ../blog 下,重新部署项目执行命令如下:

$ hexo clean
$ hexo g
$ hexo d

五、名词术语解释

1. NPM:NPM(node package manager),通常称为node包管理器。顾名思义,它的主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。参考

2. NVM:Node Version Manager(Node版本管理器),用它可以方便的在机器上安装并维护多个Node的版本。参考

3. Markdown:一种轻量级的可以使用普通文本编辑器编写的标记语言。MaHua在线编辑器、或者 MarkdownPad2 工具。参考

六、感谢

本博客内容参考了以下几位大牛写的文章,在此表示由衷地感谢各位,分别如下:

· cnfeat 的《如何搭建一个独立博客——简明Github与Hexo教程》

· leopardpan 的《HEXO搭建个人博客》

· Dreajay`s Blog

上一篇:easyui input设置为disabled提交后获取不到属性值


下一篇:100个命令Linux常用命令大全