使用Node.js+Hexo+Github搭建个人博客
一、为什么要花时间去搭建个人博客?
首先说说为什么我想要尝试着去搭建属于自己的Blog,古人云:“好记性不如烂笔头”。一开始我把笔记做在本子上、电脑上,发现要用的时候特别地不方便,而且越记越多、越多越杂。于是将其整理到有道云笔记、百度网盘上,还有手机App可以随时记笔记、搜索查看,挺好。后来慢慢发现自己记的笔记其他人又看不到,不能更好地分享与交流,无意间看到《为什么你应该写博客》一文很是激励着我。所以,我注册了CSDN、cnBlogs、Github,希望有自己的个人博客网站并且多向大牛们交流学习。废话不多说,咱们转入正题~
说明:该文章的内容介绍仅限 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
新建完成后,指定文件夹的目录如下:
1
2
3
4
5
6
7
8
|
.
├── _config.yml 网站的配置信息,您可以在此配置大部分的参数
├──
package
.json 应用程序的信息
├── scaffolds 模板文件夹
├── source 资源文件夹,存放用户资源
| ├── _drafts
| └── _posts
└── themes 网站主题文件夹
|
接着输入命令启动服务:
$ hexo server
打印信息如下表示服务启动成功:
1
2
3
|
$ 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端口被占用,更改端口号)
1
2
3
|
$ 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
等待安装完成以后,执行如下配置命令:
1
|
$ 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
- Winterland - A minimalistic theme based on Light with living background - Demo
6. 关于主题更新
博主本次选择主题为: Yilia ,配置更新请参考:Jacman Theme
当你每次修改完文件夹 ../themes/yilia 下的配置文件 _config.yml 后,请进入到主题 yilia 下执行以下命令:
$ git pull
四、常见问题及解决方法
1. http://localhost:4000/ 无法访问?
出现该问题的可能原因是端口号4000被占用,将 index.js 文件(若找不到该index.js文件,请参考我的另一篇博客:Everything 工具使用)中的端口号修改为:4001或者其他,重启服务后再次访问即可。
1
2
3
4
5
6
7
|
hexo.config.server = assign({
port: 4001,
log:
false
,
ip:
'0.0.0.0'
,
compress:
false
,
header:
true
}, hexo.config.server);
|
2. 博客出现中文乱码问题?
若出现该问题请使用编辑器 Notepad++ 或 Sublime Text2/3 编辑 _config.yml 文件,设置编辑器的编码为 UTF-8 后进行保存即可。
1
2
3
4
5
6
7
8
9
10
11
|
# 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搭建个人博客》
昵称:
退出 订阅评论
[Ctrl+Enter快捷键提交]
· 程序员为什么要开博客
· 菜鸟程序员怎么才能提高自己的技术--(献给自己共勉)
· 开篇记(好记性不如烂笔头)
· 学习的方法
· 说好的博客
· 我TM用了50个加速包,也没有抢到一张票
· 年轻人社交:一个冬天的童话,含蓄走肾游戏走心
· 北京消协:苏宁易购、当当网等4平台违反电商法规定
· 马云谢世煌为何出清淘宝股权 原因是减少关键人风险
· 小米试水首家抖音快闪店:今后抖音买手机或成新潮流
» 更多新闻...