XiaBee's Studio.

Hexo+GitPage搭建个人博客

hexo git
字数统计: 1.2k阅读时长: 4 min
2021/10/27

前言

之前一段时间都是用wordpress做个人博客，后来发现Git Page + hexo可以免费做静态页面……尝试了一下，后面就真香了（x）

关于wordpress和hexo孰优孰劣的问题这里不做详细讨论，只是介绍一下如何用Git Page+hexo搭建一个个人博客。二者具体的比较可以参考知乎的激(you)烈(hao)讨论。

简介

What’s GitHub Page

  • 官方文档

  • 简而言之就是 白嫖 GitHub的服务器，通过仓库挂一个自己的静态网站。

What’s Hexo

  • 官方文档

  • 一个渲染静态博客的框架，基于Node.js，将markdown文件渲染成html文件

Hexo + Github Page

  • 利用hexo快速生成需要的页面，利用github在公网展示出来

创建Github Pages

创建一个公网能访问的page，让大家能看到你的博客，这里利用Github page

创建repo

创建一个名为xxx.github.io的仓库，且允许公网访问：

image.png

创建Pages

在里面随便新建一个文件，确保main分支有东西。

然后在Settings -> Pages里面设置分支和网站根目录：这里直接设置为main和/(root)。如果网页上传在其他分支上可以在这里修改。

image.png

此时访问https://test.github.io应该就能看到刚刚的网页了。（因为我已经开了一个xiabee.github.io，而免费版只能开一个网页，所以test.github.io就暂时无法展示）

环境搭建

Node.js

  • Linux用户：直接包管理器安装即可

    1
    2
    3
    # 例如Ubuntu
    apt update
    apt install nodejs

    包管理器找不到nodejs的可以和Windows用户一样取官网安装。

  • Windows用户：官网下载并安装

NPM

  • node.js一般自带npm，但是可能不是最新版的npm，直接更新即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    apt-get install nodejs-legacy
    apt-get install npm
    npm install -g n
    # 安装n模块

    n stable
    # 升级nodejs到最新stable版本

    npm install npm@latest -g
    # 升级最新npm

  • 如果没有自带npm可以去官网看看，手动安装npm

Git

  • Linux：直接包管理器安装

    1
    2
    3
    # ubuntu
    apt update
    apt install git

  • Windows：官网下载安装

  • 配置ssh登录可以参考这篇博客

HEXO

先装hexo-cli：

1
2
sudo npm install -g hexo-cli
# 全局安装hexo

本地调试

hexo根目录

选择一个空目录做为hexo的根目录，初始化并安装相关依赖：

这里建议把刚刚创建的Github Page的repo克隆下来，再把该目录删空作为根目录……不然可能会遇到分支没有共同基点不能合并的问题。

1
2
3
4
5
hexo init 
# 在该目录下初始化

npm install
# 安装依赖

常用hexo命令：

1
2
3
4
5
6
7
8
hexo g # hexo generate
# 渲染页面，生成网页

hexo s # hexo server
# 启动本地服务器，提供预览和本地调试

hexo clean
# 清理本地网页

访问http://localhost:4000，出现hexo页面说明渲染成功

image.png

这里我修改过主页，所以可能看起来和初始模板不太一样。

Tips：如果server一直起不来，可能是端口被占用了。Ctrl C 关闭服务器，运行 hexo server -p 5000 更改端口号后重试。

hexo常见目录结构

1
2
3
4
5
6
7
8
9
├── _config.yml 	# 网站配置信息
├── node_modules	# nodejs组件
├── package.json
├── package-lock.json
├── public			# 生成的网站文件
├── README.md		
├── scaffolds		# 模板文件夹
├── source			# 写博客的markdown源文件
└── themes			# 主题文件夹

远程推送

把hexo推送到github中

安装hexo-deployer-git

1
npm install hexo-deployer-git --save

修改_comfig.yml

找到hexo根目录下的_config.yml，文末deploy:模块：

1
2
3
4
5
6
7
8
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: 
    github: git@github.com:xiabee/test.github.io.git
    branch: main
    gitee: git@gitee.com:xiabee/test.gitee.io.git
    branch: main

这里是做了Gitee+GitHub双备份，如果不传gitee的话可以只写github的仓库地址。

此时指定hexo上传的网页文件为main分支，如果刚刚Github Page的分支不是main的可以修改一下……改哪个都可以，一致即可。

image.png

这里GitHub Pages用的就是main分支，不需要修改

推送

1
2
3
4
5
6
7
hexo g 
# 渲染页面

hexo d
# 推送至git，部署发布

# 二者结合相当于 hexo g -d

此时访问公网地址，已经能看到该博客了：

image.png

写文章

编辑源文件

在_posts目录下创建markdown文件，仿照Hello World写就行：

image.png

然后hexo g -d，渲染、推送。

关于图床

如果是整个媒体库都上传到Github上的话，相当于是把Github作为图床了……然而众所周知Github在国内的速度非常非常慢。所以建议换一个好用的图床。

关于图床的推荐可以参考一下知乎。

这里我个人使用的是微博图床，配合Chrome插件新浪微博图床使用，可以直接微信截图到剪贴板，然后复制粘贴，灰常方便：

image.png

当然，用这个图床的前提是你得有一个微博账号（x）

Hexo备份

原文作者：xiabee

原文链接：https://blog.xiabee.cn/posts/hexo-git-setup/

发表日期：October 27th 2021, 11:46:18 pm

更新日期：February 3rd 2023, 12:28:32 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 前言
  2. 2. 简介
    1. 2.1. What’s GitHub Page
    2. 2.2. What’s Hexo
    3. 2.3. Hexo + Github Page
  3. 3. 创建Github Pages
    1. 3.1. 创建repo
    2. 3.2. 创建Pages
  4. 4. 环境搭建
    1. 4.1. Node.js
    2. 4.2. NPM
    3. 4.3. Git
    4. 4.4. HEXO
  5. 5. 本地调试
    1. 5.1. hexo根目录
    2. 5.2. 常用hexo命令：
    3. 5.3. hexo常见目录结构
  6. 6. 远程推送
    1. 6.1. 安装hexo-deployer-git
    2. 6.2. 修改_comfig.yml
    3. 6.3. 推送
  7. 7. 写文章
    1. 7.1. 编辑源文件
    2. 7.2. 关于图床
  8. 8. Hexo备份
Total : 54
2023
2022
2021
2020
tidb linux hexo archer algolia git ssh oj docker wsl nextcloud mac brew wordpress markdown utteranc postal vps ctf 碎碎念 friends 0day docker-compose blockchain smart contract glados serverless aws vulnhub s3 cloud lark lambda sns ax6000
coding informal essay friends ctf blockchain aws cloud