githubPages创建个人网站

创建网站大部分需要一台服务器（部署资源），公网IP或者域名　（大部分是域名），有时候没有那么多预算可以使用github提供的pages功能实现专属自己的一个博客网站

1. 注册github账号

前提是先拥有一个github账号，进入 github官网注册一个属于账号
进入github页面的sign up模块进行注册账号
输入要绑定的邮箱地址、密码和账号用户名后，点击continue 继续按钮

输入要绑定的邮箱地址、密码和账号用户名

输入信息后验证中

验证成功后登录账号

输入邮箱验证码，验证成功后登录账号

2. 创建个人博客仓库

创建个人仓库，仓库名称起<用户名>.github.io ,比如你的github用户名是 zhangsan 仓库名就起 zhangsan.github.io

点击creating a new file创建一个新文件，作为个人网站的主页
创建新文件
新文件的名字必须为index.html，内容先随便写一个简单的，内容示例如下，填写之后点击Commit new file提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chuliuhuan</title>
</head>
<body>
    <h1>chuliuhuan的个人主页</h1>
    <h1>Hello world</h1>
</body>
</html>

createIndex

进入该仓库setting设置TAB页面，Pages选项可以看到 web site地址 https://chuliuhuan.github.io/
pagesWebSiteURL

访问仓库URL地址https://chuliuhuan.github.io/ 仓库地址，访问成功仓库创建、配置成功~~

访问web site网站

3. 选择博客前端展示方式的框架

以上github Pages已经配置完成了~ 熟悉前端的小伙伴可以把任意静态资源丢到仓库里面，理论就可以的。
这里我们使用基于Node.js静态博客框架 hexo

3.1 准备工作

git
node.js （可以用nvm）
编辑器（markdown编辑器或者vscode编辑器）
域名
gitcafe （也可namecheap购买域名）

markdown编辑器是非必须的，只要你熟悉语法，随便一个编辑器来写都不是问题。

域名也是非必须的，gitcafe pages服务提供免费的二级域名。注册域名的教程这里就不写了。

3.2 安装hexo

进入hexo官网可以访问具体hexo使用文档，npm install hexo-cli -g 全局安装hexo插件

安装hexo

1	`npm install -g hexo-cli`

查看版本

hexo -v

创建一个项目 hexo-cli 并初始化

1
2
3

hexo init hexo-cli
cd hexo-cli
npm install

本地启动

1 2	`hexo g hexo server`

浏览器访问 http://localhost:4000，页面默认主图风格如下

defaultStyle

3.3更换主题

Hexo 默认的主题不太好看，不过官方提供了数百种主题供用户选择，可以根据自己的喜好选择，官网主题点这里查看。

3.3.1 Fluid主题

安装主题

下载最新 release 版本解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

下载解压到hexo-cli项目thems目录下

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

1 2	`theme: fluid # 指定主题 language: zh-CN # 指定语言，会影响主题显示的语言，按需修改`

创建「关于页」

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

1	`hexo new page about`

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

修改后的文件示例如下

---
title: about
date: 2024-11-18 19:20:33
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

本地启动

1 2	`hexo g -d hexo s`

浏览器访问 http://localhost:4000，`Fluid`主题风格页面如下
FluidStyle

3.4 创建文章

如下修改 Hexo 博客目录中的 _config.yml，打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

1 2	`post_asset_folder: true`

执行如下命令创建一篇新文章，名为《测试文章》

1	`hexo new post 测试文章`

执行完成后在source\_posts目录下生成了一个md文件和一个同名的资源目录(用于存放图片)

在资源目录测试文章中放一张图片 test.png

testPng

本地启动

1 2	`hexo g -d hexo s`

3.5 发布到github pages上

部署一：hexo插件

安装hexo-deployer-git

1	`npm install hexo-deployer-git --save`

修改根目录下的 _config.yml，配置 GitHub 相关信息

deploy:
  type: git
  repo: https://github.com/chuliuhuan/chuliuhuan.github.io.git
  branch: main
  token: ghp_3KakcaPHerunNRyMerofcFd9pblU282FSbsY

其中 token 为 GitHub 的 Personal access tokens，获取方式如下图

gitHubToken

部署到GitHub

1	`hexo g -d`

浏览器访问 https://chuliuhuan.github.io/，测试部署是否成功

部署二：把public文件内容直接丢到github仓库上

把public文件内容直接丢到github仓库上

部署三：自己配置nginx

有自己服务器

4.配置独特的域名

5.配置域名SSL

网站自助建站

#个人名片

githubPages创建个人网站

http://example.com/2024/11/17/githubPages创建个人网站/

作者

褚留欢

发布于

2024年11月17日

许可协议

nameCheap购买域名搭建自己的网站下一篇