前言

基于Hexo + Github搭建个人博客,快来试试吧:)

环境配置

所需工具:Node.js、npm、git

请访问以下地址安装Node.js和git:

Node.js: https://nodejs.org/zh-cn
Git: https://git-scm.com/downloads

安装完成后,在cmd下输入以下命令查看版本号,可以此判断是否安装成功:

1
2
3
node -v
npm -v
git --version

连接Github

打开git bash,输入命令设置用户名和邮箱:

1
2
git config --global user.name "Github用户名"
git config --global user.email "Github邮箱"

创建SSH密钥:

1
ssh-keygen -t rsa -C "Github邮箱"

所生成文件在[C:\Users\用户名\.ssh]目录,查看id_rsa.pub公钥内容并复制文件的内容。

添加公钥至Github: Setting -> SSH and GPG keys -> New SSH key

验证连接:
打开GitBash,输入: ssh -T git@Github.com
显示 “Hi xxx! You’ve successfully……” 即连接成功。

创建Github Pages仓库

  1. Github 主页右上角加号 -> New repository
  2. Repository name 中输入 用户名.Github.io
  3. 勾选 “Initialize this repository with a README”
  4. Description 选填
  5. 填好后点击 Create repository 创建

本地安装Hexo博客程序

查看原来的代理

1
npm config get registry

修改代理

1
npm config set registry https://registry.npm.taobao.org

安装Hexo

1
npm install -g hexo-cli

Hexo初始化和本地预览

初始化并安装所需组件:

1
2
hexo init       # 初始化
npm install # 安装组件

完成后依次输入下面命令,启动本地服务器进行预览:

1
2
hexo g          # 生成页面
hexo s # 启动预览

访问 http://localhost:4000,出现 Hexo 默认页面,本地博客安装成功!

博客目录结构
├── .
├── _config.landscape.yml
├── _config.yml
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
└── themes

  • _config.yml :全局配置文件,比如网站名称,副标题,秒速,作者,语言等等。具体可以参考官方文档:https://hexo.io/zh-cn/docs/configuration.html。
  • scaffolds :骨架文件,是生成新页面或者新博客的模版。可以根据需求编辑,当hexo生成新博客的时候,会用这里面的模版进行初始化。
  • source : 这个文件夹下面存放的是网站的markdown源文件,里面有一个_post文件夹,所有的.md博客文件都会存放在这个文件夹下。现在有一个hello-world.md文件。
  • themes :网站主题目录,hexo有非常丰富的主题支持,主题目录会存放在这个目录下面。更多的主题参见:https://hexo.io/themes/

部署Hexo到GithubPages

安装 hexo-deployer-git:

1
npm install hexo-deployer-git --save

修改 _config.yml 文件末尾的 Deployment 部分,修改成如下:

1
2
3
4
deploy:
type: git
repository: git@Github.com:用户名/用户名.Github.io.git
branch: master

完成后运行 hexo d 将网站上传部署到 Github Pages。

完成!访问Github域名 https://用户名.Github.io 就可以看到 Hexo 网站了。

发布第一篇文章

1
hexo new "First post"

其中source 文件夹中会出现一个 First post.md 文件,就可以使用 Markdown 编辑器在该文件中撰写文章了。

写完后运行下面代码将文章渲染并部署到 Github Pages 上完成发布,以后每次发布文章都是这两条命令!

生成页面

1
hexo g

部署发布

1
hexo d

也可以不使用命令自己创建 .md 文件,只需在文件开头手动加入如下格式 Front-matter 即可,写完后运行 hexo ghexo d 发布。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: 基于Hexo + Github搭建个人博客
date: 2022-11-06 07:35:15
tags:
- other
keywords:
- hexo
- Github
- blog
---

摘要
<!--more-->
正文

如果你已经操作到这里👍恭喜你👏Hexo博客搭建成功了!!!