GithubPages + Hexo 建造个人静态网页博客

我发现用hexo写博客简单又高效，markdown编写git发布，静态网页速度快，稳定性高，对于博客来说这一切足够了。只需要一条指令就可以部署到 GitHub Pages、Heroku、Coding Pages 等其他网站。而且还可以集成很多其它功能。

开始之前需要有的基本知识:

Node.js基本知识

什么是 Node.js?

Node.js是一个开源的、服务器端的JavaScript运行环境。它允许开发者在浏览器之外的服务器上运行JavaScript代码。

Key Features

Node.js 有几个关键特性，使其在开发人员中很受欢迎：

• Asynchronous I/O: Node.js 旨在处理高级别的 I/O 请求，并针对异步、非阻塞 I/O 操作进行了优化。

• Event-driven architecture: Node.js 使用事件驱动架构，回调用于处理事件和响应 I/O 请求。

• Lightweight and fast: Node.js 建立在 V8 JavaScript 引擎之上，以速度和性能着称。

• Large ecosystem: Node.js 有一个庞大而活跃的开发者社区，有许多模块和库可供使用。

Common Use Cases

Node.js 通常用于：

• 构建 Web 服务器和 API
• 开发实时应用程序，例如聊天应用程序和在线游戏
• 构建命令行工具和脚本
• 使用 Electron 开发桌面应用程序

Example Node.js Script

这是一个输出“Hello, World!”的示例 Node.js 脚本:

console.log("Hello, World!");

将此代码保存到扩展名为 .js 的文件中，例如 `hello.js\，然后使用 Node.js 命令行运行它：

node hello.js

这会输出Hello, World! to the console.

Git基本知识

什么是 Git?

Git 是一个免费的开源分布式版本控制系统。 它允许开发人员协作编写代码并跟踪随时间对代码所做的更改。

Key Concepts

Git 有几个需要理解的关键概念：

• Repository: 存储库或 repo 是 Git 跟踪和管理的文件和目录的集合。
• Commit: 提交是在特定时间点对存储库所做更改的快照。
• Branch: 分支是存储库的并行版本，允许对更改进行试验和隔离。
• Merge: 合并将一个分支的更改合并到另一个分支。
• Remote: 远程托管在远程服务器（例如 GitHub 或 GitLab）上的存储库版本。

Common Commands

以下是您将经常使用的一些常见 Git 命令：

• git init: 在当前目录中初始化一个新的 Git 存储库。
• git clone <repository-url>: 创建远程存储库的本地副本。
• git add <file>: 将文件添加到暂存区，准备提交。
• git commit -m "<commit-message>": 使用描述性消息提交对存储库的更改。
• git push: 将已提交的更改推送到远程存储库。
• git pull: 将更改从远程存储库拉取到本地存储库。
• git branch: Lists all branches in the repository.
• git checkout <branch-name>: 切换到不同的分支。
• git merge <branch-name>: 将分支中的更改合并到当前分支中。

Html、css、JavaScript 基本知识

HTML

HTML（超文本标记语言）是用于创建网页的标准标记语言。 以下是一些需要理解的关键概念：

• Tags: HTML 使用标签来定义元素，例如标题、段落和图像。
• Attributes: HTML 标记可以具有提供有关元素的附加信息的属性。
• Structure: HTML 文档具有特定的结构，头部用于元数据，主体部分用于内容。

CSS

CSS（层叠样式表）是一种样式表语言，用于描述以 HTML 编写的文档的呈现方式。 以下是一些需要理解的关键概念：

• Selectors: CSS 使用选择器来定位特定的 HTML 元素。
• Properties: CSS 属性定义了 HTML 元素的样式。
• Cascade: 多个样式可以应用于同一个元素，CSS 使用级联系统来确定哪些样式具有优先权。

JavaScript

JavaScript 是一种用于在 Web 浏览器中创建交互效果的编程语言。 以下是一些需要理解的关键概念：

• Variables: JavaScript 使用变量来存储和操作数据。
• Functions: 函数是可以重复使用以执行特定任务的代码块。
• Events: JavaScript 可以响应事件，例如单击或击键，以创建交互效果。
• DOM manipulation: JavaScript 可以操纵文档对象模型 (DOM) 来动态修改网页内容。

Markdown

Markdown 是一种轻量级标记语言，允许您使用纯文本编写内容。 以下是一些需要理解的关键概念：

Syntax

Markdown 使用包括#、*和-等字符的简单语法来创建标题、列表和其他格式元素。 这里有些例子：

• # 创建顶级标题。
• ## 创建二级标题。
• * 创建一个要点。
• - 创建破折号。

Output

当你用 Markdown 编写内容时，它可以很容易地转换为 HTML 或其他格式。 这意味着您可以创建具有专业外观的文档和网页，而无需了解 HTML 或其他复杂的标记语言。

Tools

有许多工具可用于编写 Markdown，包括具有内置支持的文本编辑器和在线编辑器。 一些受欢迎的选项包括：

• 视觉工作室代码
• Typora
• 迪林格

Conclusion

Markdown 是一种简单而强大的网络内容编写方式，即使您以前没有使用标记语言的经验，它也很容易学习。 使用 Markdown，您可以专注于内容，让格式自行处理。

安装Hexo

在安装 Hexo 之前，你需要安装以下两个工具：

• Git
• Node.js

安装好后，即可使用 npm 完成 Hexo 的安装。

$  npm install -g hexo-cli

配置Hexo

安装好 Hexo 后即可建立你的网站。

首先建立一个文件夹。

$  mkdir <your_blog_name>  # 建立你的网站根目录，名字可以自己修改

然后往这个文件夹里安装 Hexo。

$  hexo init <your_blog_name>

在 Hexo 根目录 _config.yml 这个文件里配置Hexo.

Hexo 的基本命令

• hexo init [folder]: 这个命令是 Hexo 初始化命令。 [folder] 表示你要初始化的文件夹。如果你要初始化本地，直接 hexo init .
• hexo new [layout] <标题>: 这个命令是新建文章或页面用的命令。其中 [layout] 表示他的模板（即页面或者文章）。
• hexo server： 当要在本地查看网站的时候，就可以用这个命令。
• hexo generate： 这个命令是生成网站静态文件的时候用的，生成后网页将会放在根目录下面的 public 文件夹里。
• hexo deploy：这个命令用来部署网站，使用此命令将会把生成好的页面（即 public 文件夹里的内容）部署到指定的地方上。
• hexo clean： 这个命令用来清空 public 文件夹。

部署到 GitHub

准备工作：

• 如果没有账号，请点此前往 GitHub (opens new window)注册一个 GitHub 账号。
• 新建一个公开仓库，仓库名格式为 your_username.github.io 例如你的 GitHub 用户名是 easyhexo ，那么你的仓库地址名称就应该是 easyhexo.github.io
• 创建完成后记下该仓库的 HTTPS/SSH 地址，一般格式为 https://github.com/your_username/your_reponame.git 在下一步会用到。

安装部署插件

$  npm install hexo-deployer-git --save
$  npm install hexo-server --save

配置Git

如果你只是安装好了 Git 但没有配置过你的 Git ，那么现在需要做的第一件事情就是设置你的 Git 用户名和邮箱。 在 Git Bash 中执行以下两条命令配置你的用户名和邮箱，这里建议用户名和邮箱与你的 GitHub 用户名和邮箱保持一致。

$  git config --global user.name "Your_user_name"
$  git config --global user.email Your_email@example.com

配置站点 _config.yml 文件

deploy:
  type: git # 类型填git
  repo: <repository url> # 你的Github仓库地址
  branch: master # 分支名称。默认填写 master 如果您使用的是 GitHub ，程序会尝试自动检测。
  message: # 提交信息可以自定义，不填的则默认为提交时间

发布到GitHub

在本地的 Hexo 站点根目录下，执行如下命令即可部署到 GitHub Pages 上。

$ hexo clean && hexo d -g