教你如何搭建一个自己的博客

最新推荐文章于 2025-10-09 14:25:23 发布

原创最新推荐文章于 2025-10-09 14:25:23 发布 · 800 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #github #git

Books 专栏收录该内容

3 篇文章

订阅专栏

本文详述了使用Hexo构建个人博客的全过程，包括环境准备、安装配置、主题选择与个性化设置，以及如何与GitHub Pages整合实现一键发布。

大概分为以下步骤

环境准备(node.js、git、github)
安装Hexo
配置Hexo
把Hexo和github pages连接起来
发表文章
博客主题推荐
NexT主题的简单配置
增加404公益广告页

环境准备

大概分为以下3个步骤

Node.js 安装
Git 安装
Github 账号配置
- Node.js 安装
  - node.js 下载 : Windows Installer 64-bit v12.16.1
  - install : 下一步直到结束
  - 检查是否安装成功.
```
  node -v
  npm -v
```
  如果失败，将node.exe加进环境变量
- Git 安装
  - git 下载 : Git
  - install : 下一步直到结束
  - 检查是否安装成功
```
  git --version
```
- Github 账号配置

yourname和github name相同

* 点击launch automatic page generator

安装Hexo

在node.js的安装路径下文创建node_global and node_cache文件夹

然后

 npm config set prefix node.js的安装路径\node_global
 npm config set cache node.js的安装路径\node_cache

接下来安装

 npm install hexo-cli -g
 mkdir hexo
 cd hexo
 hexo init
 npm install hexo --save

检查是否安装成功

配置Hexo

hexo g
hexo s

Then come back INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

Do not press Ctrl+C or it will stop.

打开http://0.0.0.0:4000/在浏览器中将出现:

连接Hexo和github pages

大概分为以下步骤

配置个人git信息(如果是第一次)

 git config --global user.name "wolfnx"
 git config --global user.email "lostnx@gmail.com"
 ssh-keygen -t rsa -C "lostnx@gmail.com"

打开文件hexo下的_config.yml，找到deployment并按如下修改：

 deploy:
 type: git
 repo: git@github.com:yourname/yourname.github.io.git
 branch: master

yourname是github名称

发布

创建一篇信的博客名叫buildblog。
```
  hexo new post "buildblog"
```
此时D:/Develop/Hexo/source_posts下就会buildblog.md文件，你可以编辑这个文件通过markdown编辑器。
```
  hexo g //generate
  hexo d //deploy
  
  hexo d -g //generate before deploy 
```

如果"deployer not found:git" appears，你必须安装：

	npm install --save hexo-deployer-git

博客主题推荐

这个主题简单而美丽。目前，Github上Star最高的Hexo主题支持几种不同的样式。作者提供了非常完整的配置说明。

build_blog8

NexT主题的简单配置

Hexo中有两个主要的配置文件，名称均为_config.yml。其中之一位于站点的根目录，主要包含Hexo本身的配置；另一个位于主题目录中，此配置由主题作者提供，主要用于配置与主题相关的选项。
为了便于描述，在以下描述中，前者称为站点简档，而后者称为主题简档。
- 安装NexT
  
  Hexo安装主题的方法非常简单，只需将主题文件复制到站点目录的主题目录，然后修改配置文件。
```
  cd yoursite/theme
  git clone https://github.com/theme-next/hexo-theme-next next
```
- 打开主题
  
  打开站点配置文件，找到主题字段并将其值更改为next。
```
  theme: next
```
- 验证主题
  
  首先启动Hexo本地站点，然后打开调试模式。
```
  hexo s -debug 
```
  or
```
  hexo s --debug
```
在命令行输出中提示：
```
  NFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
```
现在，您可以使用浏览器访问http://localhost:4000，检查该站点是否正常运行。
- theme配置
  
  你可能需要访问外网
  
  Theme configuration

增加404公益广告页

GitHub Pages具有创建404页面的准则： Custom 404 Pages

推荐使用Tencent Public Welfare 404

创建一个404.html文件并将其放在以下路径中：

build_blog10

Html Content:

<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="robots" content="all" />
		<meta name="robots" content="index,follow"/>
		<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
	</head>
	<body>
		<script type="text/plain" src="http://www.qq.com/404/search_children.js"charset="utf-8" homePageUrl="/"
		homePageName="Back to my homepage">
		</script>
		<script src="https://qzone.qq.com/gy/404/data.js" 	charset="utf-8">
		</script>
		<script src="https://qzone.qq.com/gy/404/page.js" 	charset="utf-8">
		</script>
	</body>
</html>