GitHub搭建个人网站

Hexo + GitHub搭建个人网站

简介

使用 Hexo 和 GitHub Pages 建立个人博客网站是一个相对简单且流行的方法。以下是详细的步骤：

1. 安装依赖环境

安装 Git

Git 是一个分布式版本控制系统，用于管理 Hexo 博客文章并将其上传到 GitHub。

Windows 用户

  1. 前往 Git 官网 下载并安装。
  2. 安装完成后，使用 Git Bash 作为命令行工具。

Linux 用户

运行以下命令安装 Git：

1
sudo apt-get install git

Hexo简介

 Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。

前期安装

一、安装Git

 Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。也就是用来管理hexo博客文章，上传到GitHub的工具。因为 Hexo 是一个托管于 GitHub 上的开源项目，所以安装 Hexo 的时候需要使用 Git 来下载源码和依赖代码，而且后面要将自己的博客发布到 GitHub pages 上面也需要使用 Git。

windows：

到git官网上下载,Download git,下载后会有一个Git Bash的命令行工具，以后就用这个工具来使用git。windows在git安装完后，就可以直接使用git bash来敲命令行了。

linux：

1
sudo apt-get install git

二、安装nodejs

Hexo是基于Node.js开发的，所以需要安装一下Node.js环境。您可以从 Node.js 官网 下载并安装。

windows：Node.js选择LTS版本就行了。

linux：

1
2
sudo apt-get install nodejs
sudo apt-get install npm

安装 Hexo

安装 Node.js 和 Git 后，首先在本地新建一个空文件夹 myBlog，用来存放 Hexo 的文件和以后要写的博客文件。

注意： 文件路径中不要包含中文，以避免可能出现的问题。

例如：D:\Mycode\projects\Hexo Blog\myBlog

然后cd到这个文件夹下。

1
2
3
4
5
6
7
8
# 进入到myBlog文件夹
cd myBlog
# 安装 hexo 框架
npm install -g hexo-cli
# 初始化hexo
hexo init
# 安装 hexo 依赖包
npm install

安装 hexo 模块，-g表示安装全局模块。

hexo 初始化，会用 git clone命令去 GitHub 下载一个 hexo 默认模板代码库。

安装依赖包，类似安装 pip 的 requirement 文件，会根据刚下载的代码库中的配置文件，下载并安装所需依赖包。

新建完成后，指定文件夹目录下有：

  • node_modules: 依赖包
  • public：存放生成的页面
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题
  • _config.yml: 博客的配置文件

三、打开hexo的服务

1
2
3
4
5
6
7
8
9
# 清除缓存文件，建议写完文章后执行一次
hexo clean 
# 生成静态文件（生成 public 文件夹，写完文章执行）
hexo g                       g->generate
# 启动服务器
hexo s                       s->server

# 或者直接执行
hexo clean && hexo g && hexo s

此时，在在浏览器中访问 http://localhost:4000 ，就可以看到 Hexo 搭建的默认主题博客示例了。

四、更换主题

参考开始使用 | Hexo Fluid 用户手册 (fluid-dev.com)

去主题官网，里面有上百种主题。

执行命令，将主题安装到myBlog根目录

1
npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将 Fluid 主题的 _config.yml 内容复制进去。

后续修改博客的配置，例如标题，头像，评论等等只需要在 _config.fluid.yml文件中配置就行。

1.指定主题
修改myBlog博客目录中的 _config.yml：

1
2
theme: fluid  # 主题
language: zh-CN  # 语言

2.创建关于页面
首次使用主题的「关于页」需要手动创建：

1
hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

1
2
3
4
---
title: about
layout: about
---

这是关于页面
打开hexo的服务

1
2
3
4
5
6
# 清除缓存文件，建议写完文章后执行一次
hexo clean 
# 生成静态文件（生成 public 文件夹，写完文章执行）
hexo g                       g->generate
# 启动服务器
hexo s                       s->server

或者直接执行

hexo clean && hexo g && hexo s
此时，在浏览器输入http://localhost:4000/，就可以看到 Hexo 搭建的 Fluid 主题博客示例了。

四、Github部署

我们利用 Hexo 框架在本地搭建了一个精美的博客，可是只能本地访问，要想发布到互联网上，还需要将它部署在网站上。

博客的功能只要能阅读文章就够了，因此可以考虑将其部署在提供静态网页托管服务的网站上，这样就省去了购买服务器(云主机)、域名、 IP 这些步骤。

下面介绍怎样利用 GitHub 提供的免费静态网页托管服务 GitHub Pages 建站。

1.GitHub Pages 简介

GitHub 是世界上最流行的软件源代码托管服务平台。

一个项目的主页如果只有源码，对新接触的人很不友好，不知从何处下手。虽然已经有了 readme.md 文件，但毕竟不如一个直观的网页来的直接。于是 GitHub 就设计了 Pages 功能，允许用户设计一个图文并茂的网页作为项目首页。

2.GitHub Pages 准备

首先注册一个 GitHub 账号。

打开 GitHub 主页，点击左上角New。

由于每个 GitHub 账户只能建立一个 GitHub Pages 页面，所以 Repository name 必须填username.github.io，否则就会建立一个普通仓库，GitHub Pages 功能不会生效。

比如我的用户名是Sulawesi02，Repository name 这里就填Sulawesi02.github.io。

注意勾选 Public。

网上有的教程建议勾选 Add a README file自动生成一个 readme.md文件，但这样做后续发布 Hexo 到 GitHub时会出问题，所以这里建议不要勾选。

点击create repository，创建仓库。

  • 将hexo部署到GitHub Pages
  • 配置 Git 参数
    1
    2
    3
    在博客根目录配置用户名和邮箱
    git config --global user.name "你的用户名"
    git config --global user.email "你的邮箱"
    使用以下命令生成 SSH Key：
    1
    ssh-keygen -t rsa -C "你的邮箱"
    接着一路回车，直到结束。 会显示已经生成了.ssh的文件夹。在你的电脑中找到文件夹C:\Users\ useraccount /.ssh/id_rsa.pub，用记事本打开，复制全部内容。

打开自己的 Github 主页，点击右上角的头像，点击Settings。
点击SSH and GPG keys，然后点击New SSH keys。
找到SSH keys的设置选项，点击New SSH key 把id_rsa.pub里面的信息复制进去。

Title 可以随便起一个名字，Key 填写上一步复制的公钥内容，然后点击Add SSH key

最后执行下面的命令，测试一下 Git 参数是否配置成功。出现Hi Sulawesi02! You’ve successfully authenticated, but GitHub does not provide shell access.，说明配置成功。

1
ssh -T [email protected]

3.2发布

配置站点文件

  1. 打开 Hexo 项目的根目录，找到 _config.yml 文件。
  2. 滚动到文件底部，找到 deploy 配置部分。
  3. 修改为以下内容：
    1
    2
    3
    4
    deploy:
      type: git
      repo: [email protected]:用户名/注册的仓库名.git
      branch: main
    安装deploy-git 插件，也就是部署的命令,这样你才能用命令部署到GitHub。
    1
    npm install hexo-deployer-git --save
    然后
    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 清除缓存文件，建议写完文章后执行一次
    hexo clean 
    # 生成静态文件（生成 public 文件夹，写完文章执行）
    hexo g                       g->generate
    # 部署到远程站点
    hexo d                       d->deploy

    # 或者直接执行
    hexo clean && hexo g && hexo d
    执行成功可以通过``https://注册的仓库名` 来访问博客了。