一、为什么要花时间去搭建个人博客?
首先说说为什么我想要尝试着去搭建属于自己的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
新建完成后,指定文件夹的目录如下:
.
├── _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
- 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或者其他,重启服务后再次访问即可。
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搭建个人博客》