存在的意义不在于目的地,而在于旅程本身所带来的启示。|

Titonay

园龄:2个月粉丝:0关注:0

Hexo-Github-pages-实现个人博客

Hexo + Github pages 实现个人博客

一、过程总览和回顾

我是新手,2024/12/21号尝试着自己搭建自己的个人博客网站,起初是只想着在自己本地电脑环境上搭建

一开始使用了Hugo,据说是世界上最快的静态网页生成器,但是捣鼓了一个下午,无功而返

  • 第一个原因:阅读官方文档不够仔细

  • 第二个原因:初步搜索不到Hugo相关主题的配置

  • 第三个原因:对Hugo主题配置的繁琐感到恐惧

一直尝试到晚上,用到一个hugo-theme-air主题,勉强满足我对我的博客的期待,但是界面有些麻烦,不合心意

于是开始尝试其他的静态网页生成器,于是他就出现了

Hexo + Github pages

现在先来说一下失败的案例Hugo

二、Hugo的错误摸索

我使用Bing搜索引擎,找到了三个官方的文档链接

1、这个应该是官方最新的文档,因为解决了我的不少疑惑:

Quick start | Hugo

2、下面这两个就是让我痛苦难受的两个残缺不全的文档:

Hugo 快速开始指引 - Hugo中文文档

Hugo中文文档

通过这几个文档,以及一些其他csdn上的文章,我最终成功放弃Hugo

但尝试了一天,也不能说完全没有收获,爬山过程的风景也是不错的嘛,接下来还原一下当初的步骤:

a. 安装Hugo和Git

Hugo 安装

Git 安装

b. 构建站点并尝试运行
hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server
c. 撰写内容
hugo new content content/posts/my-first-post.md
vim content/posts/my-first-post.md
d. 配置站点
vim hugo.toml

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'
e. 运行站点

hugo server -D

总结:亲身实践是成功的,就是配置比较难

三、Hexo + Github Pages

我是跟着csdn上的优秀文章来操作的

GitHub Pages + Hexo搭建个人博客网站,史上最全教程_hexo博客-CSDN博客

1. 创建Github仓库
  • 填写仓库名,格式必须为<用户名>.github.io,然后点击Create repository

  • 点击creating a new file创建一个新文件,作为我们网站的主页

  • 新文件的名字必须为index.html,内容先随便写一个,填写之后点击Commit new file提交

  • 查看自己的博客链接并尝试访问

2. 安装Hexo

安装Hexo

npm install -g hexo-cli
hexo -v

创建项目并初始化

hexo init hexo-blog
cd hexo-blog
npm install

本地启动

hexo g
hexo s
或者
hexo generate
hexo server
3. 下载主题

下载Fluid主题(复制仓库clone链接)

Fluid 官网

git clone https://github.com/fluid-dev/hexo-theme-fluid.git themes/fluid
4. 指定主题
theme: fluid  # 指定主题
language: zh-CN  # 指定语言,会影响主题显示的语言,按需修改
5. 创建 关于页
hexo new page about

vim /source/about/index.md

修改后的文件示例如下:
---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文,支持 Markdown, HTML
6.创建 文章

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

hexo new post First.md

执行完成后在source\_posts目录下生成了一个md文件,即博客文章

7. 个性化页面展示

a、浏览器的标签页名称

vim _config.yml

# Site
title: 
subtitle: ''
description: ''
author: ''

# language
language: zh-CN

b、博客标题

vim themes/fluid/_config.yml

# 要修改的字段
1、blog_title
2、text
8. 绑定Github仓库,发布到Pages

安装hexo-deployer-git

npm install hexo-deployer-git --save

修改_config.yml

deploy:
	type;git
	repo:  https://github.com/xxx/xxx.github.io.git
	branch: master
	token: 

其中 tokenGitHubPersonal access tokens,获取方式如下图

PAT密钥获取方法

hexo g -d    # 部署到Pages

访问博客地址 https://titonay-huang.github.io/

如果这个方法不行,可以参照以下

hexo -g

项目根目录下会有public文件夹

1、把public文件夹的内容拖取到Github仓库里即可实现Github Pages访问

2、把public文件夹作为nginx,apache或者tomcat等web服务器的根目录,实现静态访问

四、总结

虽然搬运的水分很大,但这就是我的第一篇博客啦,希望我在计算机领域持续深耕并且有所建树

本文作者:Titonay

本文链接:https://www.cnblogs.com/Titonay/p/18633024

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Titonay  阅读(49)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起