LOADING

加载过慢请开启缓存 浏览器默认开启

基于Hexo与git的个人博客快速部署

2024/1/17 教程 hexo git

前言

首先,这个方法仅仅适于新手尝鲜,有想法搭建一个个人博客玩玩的。没错,我就是先尝试玩玩。真要想制作个人网站,最好是去学习web开发的相关知识。

Hexo是一款基于Node.js的静态博客框架,可以方便的生成静态网页托管在GitHub上,是搭建该个人博客的框架。故而,首先得确保电脑有配置好相对应的环境。没有也别担心,本文会详细说明步骤。

安装Git和Node.js

直接官网下载即可,安装部分,纯小白可以无脑下一步,有点基础的可以自行谷歌。

注意!最好下载长期支持版,即LTS

其他版本可能不稳定。

安装Git

Git官网:https://git-scm.com/

安装完后,可以在电脑桌面,右键,有出现Open Git Bash here即为成功。

安装Node.js

Node.js官网:https://nodejs.org/

安装完成后,打开cmd窗口或者PowerShell窗口,输入

node -v

返回版本号即为成功

安装Hexo

在电脑本地新建一个用于安装博客的文件夹,进入文件夹,右键,Open Git Bash here 就会打开一个窗口(为了方便说明,这里将该窗口称为git窗口),显示的地址就是文件夹的路径。

然后打开Hexo官网,将官网给出的几条命令逐条复制到git窗口,回车表示运行

Hexo官网:https://hexo.io/zh-cn/index.html

安装Hexo框架

npm install hexo-cli -g

初始化博客

hexo init blog

进入博客文件夹

cd blog

安装Hexo的依赖包文件

npm install

启动Hexo服务

hexo server

在浏览器输入http://localhost:4000即可本地访问博客,推荐使用chrome浏览器。

按F12,进入开发者模式,可以查看网页的元素等。

编辑博客

在前面打开的git窗口中输入以下命令

创建文章

hexo new "文章标题"

/blog/souce/posts文件夹下可以看到新建的文章,以markdown文件形式,打开即可使用markdown编辑文章。

可以使用Visual Studio Code(轻量级文本编辑器)来进行编辑,不过更推荐使用Typora(轻量级Markdown编辑器)。

生成网页

hexo g

运行博客

hexo s

即回到浏览器刷新一下即可看到编辑的文件,如果不行,就重新进入 http://localhost:4000即可。

更改主题样式

打开Hexo官网,寻找喜欢的主题,就可以进入对应主题的Github仓库,然后跟着主题的配置指南即可。这里我以本博客的主题样式为例。Diaspora,通过链接去到主题的Github仓库,可以跟着指南配置。

下载主题

git clone https://github.com/Fechin/hexo-theme-diaspora.git themes/diaspora

Themes文件夹下,可以看到下载好的主题

需要对主题进行个性化修改,就进入对应主题的文件夹下_config.yml可以进行对应的配置。如果懂相关知识就可以随便改了(bushi)

一般来说,一般人主要更改的就是图像以及音频,然后其他功能需要就开,不需要就关掉。

图像部分,找到cover

# 默认文章封面图(随机调用,支持外链)
cover: 
  - /img/图片文件名

记得将想要放置的图片放进/Themes/img文件夹下

音频部分,确保开启音频,

autoplay: true

# 默认音乐(随机播放)
mp3: 
    - 音频的外链地址,如(http://music.163.com/song/media/outer/url?id=869119.mp3)

不知道外链怎么获取的可以去谷歌或者bing,当然也可以直接去这个网站找https://music.liuzhijin.cn/?name=%E4%B8%9C%E6%96%B9&type=netease

启用主题

修改Hexo配置文件 _config.yml 找到主题项,设置为diaspora

注意,是blog文件夹下的配置文件

...
theme: diaspora
...

在这个配置文件中可以修改网站的title等信息,一并修改后

# Site
title: 千幻笙的小窝
subtitle: 'Awith的小站'
author: Awith

Ctrl+S保存退出

在git窗口生成网页,运行博客,在浏览器查看主题样式。如果git窗口之前不小心关了,可以去到自己建的用于安装hexo的文件夹,打开blog文件夹,右键,Open Git Bash here 就会打开一个git窗口。

hexo g
hexo s

刷新一下浏览器即可查看更改后的网页。

注册Github账号以及新建仓库

要将我们的个人博客网站部署到GitHub Pages上,拥有一个GitHub账户自然就是最基本的前提了。当然也可以部署到Gitee Pages上,或者是有自己的服务器就部署到自己的服务器上。一般主要尝试一下的话,直接在GitHub Pages上就好了。如果没有魔法,那就配置在Gitee Pages上吧。

Github官网:https://github.com/

注册完账号后新建一个仓库用于个人博客

注意!仓库名应该为:用户名.github.io 这个用户名使用你的GitHub帐号名称代替

创建好仓库后,在setting里找到pages,可以看到GitHub Pages给我们提供了一个格式为https://用户名.github.io/ 的免费域名,并且相应的网站是从该仓库的 main 分支构建得到的。复制该网站到浏览器,即可查看形成的网页。

上传博客到Github托管

在git窗口执行命令行

部署Git全局配置

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

没有报错,就是成功

生成ssh密钥文件

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

然后直接三个回车即可,默认不需要设置密码。

输入以下命令获取密钥

 cat ~/.ssh/id_rsa.pub

将显示的密钥复制,在Github仓库setting下Deploy Keys,公钥随便输入,密钥就填刚才生成的。

检测ssh是否成功

输入以下命令

 ssh -T git@github.com

若出现successfully即为成功,若出现

This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

一般情况下,不用担心,输入yes,回车就可以了。

这是一个安全特性,用于确保你连接到的主机是你预期的主机,而不是中间人攻击。这个提示的意思是,你的计算机之前没有连接过这个主机,因此无法验证其身份。你需要决定是否继续连接。

你有以下选项:

  1. 输入”yes”,继续连接到主机。这将更新你的~/.ssh/known_hosts文件,将主机的密钥添加到已知主机列表中。
  2. 输入”no”,取消连接到主机。

设置部署仓库和分支

回到我们前面创建的用于安装hexo的文件夹,打开目录下面的_config.yml文件,并滚动到文件最后,找到deploy,进行更改。

deploy:
  type: 'git'
  repository: git@github.com:qian488/qian488.github.io.git
  branch: main

关于repository的获取,就是你的仓库在拿到 意思,直接去你创建的GitHub的仓库下,点击code,点击ssh,看到SSH key,复制上面的即可。

关于branch的填写,需要跟之前GitHub形成网页的分支一样,即main

注意!冒号后要空格。

安装Git部署插件

 npm install hexo-deployer-git --save

等待安装完成后即可。

部署网页

清除缓存,生成网页,运行博客,检查没什么问题后,就实施部署

hexo clean 
hexo g
hexo s
hexo d

去到Github的仓库即可看到上传的内容,而进入GitHub Pages提供的网站,即可看到个人博客搭建成功,将该网站分享给好友,也可查看该个人博客。

后续更新博客

主要步骤就是

1.创建文章并编写内容

hexo new "文章标题"

/blog/souce/posts文件夹下可以看到新建的文章,以markdown文件形式,打开即可使用markdown编辑文章,这里推荐使用Typora,体验非常好。

文章首部样式

title: 文章标题
date: 时间
categories:
    - 分类1
    - 分类2
tags: 
    - 标签1
    - 标签2
mp3: 音频外链
cover: 封面(路径)

2.生成网页

hexo g

3.检查网页

hexo s

4.部署网页

hexo d

希望对你有用!