这篇文章会给大家分享利用github pages搭建我的个人独立博客的过程,希望能帮助到一些想搭建独立博客的朋友。本文操作中所使用的操作系统为MacOS。
一、工具准备
1.下载nodejs
https://nodejs.org/zh-cn/download/
进入网站以后,根据自己的电脑系统,选择不同的平台下载。目前支持的主要平台是Windows,MacOS,Linux。下载的版本推荐是长期维护版,另外一个版本是最新尝鲜版,虽然包含了很多最新功能,但是有可能不太稳定,不太适合新人使用。
2.下载git
https://git-scm.com/downloads
进入网站以后,也是跟据自己的电脑系统选择相应平台。安装时基本就是按照它的提示,点击下一步即可。
3.测试安装结果
打开终端(Windows系统下需要管理员运行cmd),依次输入
node -v
npm -v
git -v
如果都能正常输出版本号,说明安装成功了,可以进入下一步操作。
4.安装hexo
npm install hexo-cli -g
这里比较旧的版本可能是npm install hexo -g,但是现在这个命令已经不用了
二、搭建仓库
1.注册登录github
登录成功以后,点击 Repositories -> New,进入新建仓库页面
在仓库名称处,输入 用户名.github.io (这里的用户名是你注册的用户名,一般是英文字母)
选择Public
选择Add a README file
最后,点击最下面的Create repository,完成仓库创建。
2.创建SSH key
打开终端,输入
ssh-keygen -t rsa -C "邮件地址"
然后连续4次敲入回车键,完成创建。
打开~/目录,寻找.ssh目录,这是一个隐藏目录,需要在Find中设置一下,把所有隐藏的目录显示出来才能看到。在Windows系统下的目录应该是C:\Users\用户名。
在.ssh目录中,以文本方式打开id_rsa.pub文件,并复制里面的内容。
然后打开github,点击右上角图形,在弹出菜单中选技Settings,进入设置页面。
选择SSH and GPG keys菜单,在SSH keys项上点击New SSH key,在弹出框中粘贴刚才id_rsa.pub的文件内容。
现在,可以测试一下是否成功了,在终端中输入
ssh -T git@github.com
回车,然后再输入yes。
三、在本地生成博客内容
1. 在本地电脑上建一个博客目录,比如~/blog/,在终端上进入这个目录,然后运行
hexo init
我在运行时,报了如下错误:
(node:67639) ExperimentalWarning: The fs.promises API is experimental
INFO Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO Install dependencies
warning hexo-renderer-stylus > stylus > css > source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
error hexo@6.3.0: The engine "node" is incompatible with this module. Expected version ">=12.13.0". Got "11.13.0"
error Found incompatible module.
WARN Failed to install dependencies. Please run 'npm install' in "/Users/tianlibin/blog" folder.
从错误信息上可以看出来,是我本地的node版本太低了,因为hexo要求node最低版本是12.13.0。升级了本机的node版本后,问题解决。
2. 运行
hexo generate
注:此命令可简写为 hexo g
3. 运行
hexo server
注:命令可简写为 hexo s
如果上述命令运行失败,有可能是国内与github的连接不太稳定,可以尝试重复几次,直到成功。
每次写好文章之后,也可以运行这个命令,来预览文章的效果。
hexo server命令运行成功后,输出如下:
INFO Validating config
INFO Start processing
INFO Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
在浏览器地址栏里打开 http://localhost:4000/ ,即可看到一个博客DEMO页面
可以按 control+C,结束服务。
4. 修改_config.yml
在博客目录下,找到_config.yml文件,找到 Site模块,修改
# Site
title: '给博客取个大标题'
subtitle: '给博客取个副标题'
description: ''
keywords:
author:
language: en
timezone: ''
在这里可以修改网站的标题、副标题、描述、关健字、作者、语言等信息。
另外,找到最下面的Deployment模块
原始内容如下:
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: ''
修改如下
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: git@github.com:xxx/xxx.github.io.git
branch: main
这里有几点需要注意一下
- type,repository,branch三个关健字,前面都有两个空格,冒号后面有一个空格,这里不能把空格删掉
- type和branch后面的值都是固定的,repository后面的值,需要到github上找你创建的那个仓库,点击Code按钮,复制git的链接。(为了后面提交代码方便,尽量复制git链接,而不是https链接)
四、博客上线
1. 安装自动部署发布工具
npm install hexo-deployer-git --save
然后在终端依次输入
hexo g(生成)
hexo d(上传)
接下来我们就成功把本地内容上传到github了
上传成功以后,我们就算搭建好了!上自己的网址看看吧
网址是我们之前设的仓库名:用户名.github.io
2. 写文章
我们在Blog目录下,在终端中输入以下命令,就可以生成新的文章文件
hexo new 文章标题
文章是.md格式,在我们的Blog文件夹中的source/_posts中。
我个人是使用有道云笔记录来编辑md文件,支持所见即所得。
3. 上传文章
文章写好以后,还是输入,即可发布。文章来源:https://uudwc.com/A/6AmN
hexo g(生成)
hexo d(上传)
至此,我们就成功搭建好基本的博客了,剩下的就是对博客的一些优化和美化了。文章来源地址https://uudwc.com/A/6AmN