前言
首先,这个方法仅仅适于新手尝鲜,有想法搭建一个个人博客玩玩的。没错,我就是先尝试玩玩。真要想制作个人网站,最好是去学习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,回车就可以了。
这是一个安全特性,用于确保你连接到的主机是你预期的主机,而不是中间人攻击。这个提示的意思是,你的计算机之前没有连接过这个主机,因此无法验证其身份。你需要决定是否继续连接。
你有以下选项:
- 输入”yes”,继续连接到主机。这将更新你的
~/.ssh/known_hosts
文件,将主机的密钥添加到已知主机列表中。 - 输入”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
希望对你有用!