wangwang
wangwang
文章52
标签50
分类6
Github+Hexo搭建个人网站详细教程

Github+Hexo搭建个人网站详细教程

v2-d4c1239e75c02e8482c22017a6c8d407_1440w

背景

​ 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿,是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。

准备

  • Github账号
  • 安装Git
  • 安装Node.js

Github账号

​ 首先我们需要一个Github账号,若是没有的话,可以前往官网注册一个,不懂的话,可以参考Github账号注册

安装Git

什么是Git ?

简单来说Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。我们网站在本地搭建好了,需要使用Git同步到GitHub上。

如果想要了解Git的细节,参看廖雪峰老师的Git教程:Git教程

从Git官网下载:Git - Downloading Package (git-scm.com)

现在的机子基本都是64位的,选择64位的安装包,下载后安装,在命令行里输入git测试是否安装成功,若安装失败,参看其他详细的Git安装教程。

安装成功后,将你的Git与GitHub帐号绑定,鼠标右击打开Git Bash

image-20230102112524450

或者在菜单里搜索Git Bash,设置user.name和user.email配置信息:

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

生成ssh密钥文件:

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

然后直接三个回车即可,默认不需要设置密码
然后找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制

image-20230102112653519

打开SSH and GPG keys (github.com)页面,新建new SSH Key

image-20230102112741186

Title为标题,任意填即可,将刚刚复制的id_rsa.pub内容粘贴进去,最后点击Add SSH key。
在Git Bash中检测GitHub公钥设置是否成功,输入 ssh git@github.com

image-20230102112805293

如上则说明成功。这里之所以设置GitHub密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

安装Node.js

Hexo基于Node.js,Node.js下载地址:Download | Node.js 下载安装包,注意安装Node.js会包含环境变量及npm的安装,安装后,检测Node.js是否安装成功,在命令行中输入 node -v :

image-20230102113340687

检测npm是否安装成功,在命令行中输入npm -v :

image-20230102113355960

到这了,安装Hexo的环境已经全部搭建完成。

创建Github仓库

打开https://github.com/,新建一个项目,如下所示:

image-20230102114820493

然后如下图所示,输入自己的项目名字,后面一定要加.github.io后缀,README初始化也要勾上。名称一定要和你的github名字完全一样,比如你github名字叫abc,那么仓库名字一定要是abc.github.io

image-20230102114957155

然后项目就建成了,点击Settings,向下拉到最后有个GitHub Pages,点击Choose a theme选择一个主题。然后等一会儿,再回到GitHub Pages,会变成下面这样:

image-20230102115118709

点击那个链接,就会出现自己的网页啦,效果如下(我的是已经使用主题的页面,你们的页面可能不一样):

image-20230102115238914

安装Hexo

Hexo就是我们的个人博客网站的框架, 这里需要自己在电脑常里创建一个文件夹,可以命名为Blog,Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后,进入文件夹中,按住shift键,右击鼠标点击命令行

image-20230102114003386

使用npm命令安装Hexo,输入:

npm install -g hexo-cli 

这个安装时间较长耐心等待,安装完成后,初始化我们的博客,输入:

hexo init blog

注意,这里的命令都是作用在刚刚创建的Blog文件夹中。

为了检测我们的网站雏形,分别按顺序输入以下三条命令:

hexo new test_my_site

hexo g

hexo s

这些命令在后面作介绍,完成后,打开浏览器输入地址:

http://localhost:4000

可以看出我们写出第一篇博客

image-20230102122254270

Hexo常用命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n “我的博客” == hexo new “我的博客” #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

刚刚的三个命令依次是新建一篇博客文章、生成网页、在本地预览的操作。

连接Github仓库

打开博客根目录下的_config.yml文件,这是博客的配置文件,在这里你可以修改与博客相关的各种信息。

修改最后一行的配置:

deploy:
- type: git
  repository: https://github.com/wangwangit/wangwangit.github.io.git
  branch: master

repository修改为你自己的github项目地址.

绑定域名

现在默认的域名还是xxx.github.io,是不是很没有牌面?想不想也像我一样弄一个专属域名呢,首先你得购买一个域名,xx云都能买,看你个人喜好了。

以我的谷歌域名为例,如下图所示,添加一条解析记录:

image-20230102120424491

然后打开你的github博客项目,点击settings,拉到下面Custom domain处,填上你自己的域名,保存:

image-20230102120521154

这时候你的项目根目录应该会出现一个名为CNAME的文件了。如果没有的话,打开你本地博客/source目录,我的是D:\study\program\blog\source,新建CNAME文件,注意没有后缀。然后在里面写上你的域名,保存。最后运行hexo ghexo d上传到github

image-20230102120559425

image-20230102120617069

备份博客源文件

有时候我们想换一台电脑继续写博客,这时候就可以将博客目录下的所有源文件都上传到github上面。

首先在github博客仓库下新建一个分支hexo,然后git clone到本地,把.git文件夹拿出来,放在博客根目录下。

然后git checkout hexo切换到hexo分支,然后git add .,然后git commit -m "xxx",最后git push origin hexo提交就行了。

替换主题

我使用的主题是这个:博客主题

具体操作可以参考该主题的文档

最后

对于图床使用可以参考我以下文章:

使用腾讯CDN优化github图床访问

使用Nginx自建CDN加速Hexo博客

优秀的开源图床picGo

本文作者:wangwang
本文链接:https://www.wangwangit.com/Hexo%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可