您的位置: 首页  >  IT文章  >  使用Node.js+Hexo+Github搭建个人博客

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

分类: IT文章 • 2022-07-13 23:53:58

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

首先说说为什么我想要尝试着去搭建属于自己的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
  • 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: 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

五、名词术语解释

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

相关推荐