使用Node.js+Hexo+Github搭建我的博客

时间 2019-11-13

标签使用 node.js+hexo+github node hexo github 搭建我的博客栏目 JavaScript 繁體版

原文原文链接

1、为何要花时间去搭建我的博客？javascript

首先说说为何我想要尝试着去搭建属于本身的Blog，古人云：“好记性不如烂笔头”。一开始我把笔记作在本子上、电脑上，发现要用的时候特别地不方便，并且越记越多、越多越杂。因而将其整理到有道云笔记、百度网盘上，还有手机App能够随时记笔记、搜索查看，挺好。后来慢慢发现本身记的笔记其余人又看不到，不能更好地分享与交流，无心间看到《为何你应该写博客》一文非常激励着我。因此，我注册了CSDN、cnBlogs、Github，但愿有本身的我的博客网站而且多向大牛们交流学习。废话很少说，我们转入正题~html

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

我的博客示例： Mauger`s Blognode

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

2、准备工做github

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

2. Github 帐号申请、配置SSH Keysjson

3. Node.js 下载安装windows

4. Markdown 下载安装浏览器

说明：本想着讲一下详细的下载、安装和配置工做，却发现仍是官方文档说明更好，已附上相关连接。

3、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，服务就停了，也就没法访问了。若是操做无误且正确启动服务后仍没法访问，那么请您继续往下看：（4、常见问题及解决方法）

或者（防止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

Kiddochan - A simple, flexible and responsive theme for Hexo based on Jacman. - Demo

Kiddochan - A simple, flexible and responsive theme for Hexo based on Jacman. - 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

Winterland - A minimalistic theme based on Light with living background - 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: 4001,
  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

5、名词术语解释

1. NPM：NPM（node package manager），一般称为node包管理器。顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。参考

2. NVM：Node Version Manager（Node版本管理器），用它能够方便的在机器上安装并维护多个Node的版本。参考

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

6、感谢

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

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

· leopardpan 的《HEXO搭建我的博客》

· Dreajay`s Blog