用GitHub Pages和Hexo搭建个人博客小站

发布于 2020-03-02  219 次阅读


因为GitHub在国内太慢的原因,所以打算用gitee或者coding的,但是发现现在国内的代码托管商新建仓库都不支持自定义域名了,所以只能用回GitHub Pages来托管了。

废话不多说,直接开干。

安装Node.js

首先下载稳定版

Node.js官网

下载完,安装一路next。

最后安装好之后,按Win+R打开命令提示符,输入node -vnpm -v,如果出现版本号,那么就安装成功了。

安装Git

为了把本地的网页文件上传到github上面去,我们需要用到分布式版本控制工具————Git
Git官网

安装选项还是全部默认。

安装完成后在命令提示符中输入git --version验证是否安装成功。

设置SSH和Git账户

设置user.name和user.email配置信息:

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

生成ssh密钥文件:

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

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

然后找到C:/Users/(yourname)/.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制

打开GitHub-Settings-SSH and GPG keys 页面,新建new SSH Key,名字随便,内容复制进去,输密码确认即可。

在Git Bash中输入ssh -T git@github.com,若显示出你的名字,则配置成功,如果没有,这一步涉及的操作重新检查一遍。

新建repository

打开GitHub(没有的话注册一个即可,速度过慢可以翻墙), 在GitHub右上角点击“加号”-New repository-名字设为yourname.github.io(这里的yourname是名字,不是昵称,比如博主这里是cordinovet)-README初始化也要勾选-创建。

安装Hexo

在合适的地方新建一个文件夹,用来存放自己的博客文件,比如我的博客文件都存放在D:\cordinovet.github.io目录下。

在该目录下右键点击Git Bash Here,打开git的控制台窗口,以后我们所有的操作都在git控制台进行,就不要用Windows自带的控制台了。

定位到该目录下,输入npm i hexo-cli -g安装Hexo。

安装完后输入hexo -v验证是否安装成功。

连接自有域名和Github

如果你自己没有域名,并且习惯于“yourname.github.io”这样的域名的话,此步可跳过。

到域名提供商或解析商设置CNAME

这里以DNSPod为例。
其中主机记录为你前面创建网站时输入的子域名(如果site.xxx.com,则子域名为site)
记录类型为CNAME
记录值为在github上设置的域名(如cordinovet.github.io)
其他默认
最后点确认
20200216113810.png

修改配置文件_config.yml

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

修改前面的title,subtitle,author,keyword。(SEO需要)

自己想修改成什么就修改成什么。

同时修改url(url可以修改成自己有的域名,如site.wnag.com.cn,也可以修改成在github设置的域名,cordinovet.github.io

最后,修改最后一行的配置(修改Git提交上去的途径)

deploy:
    type:""

改成

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

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

添加CNAME解析文件

进入本地博客文件夹 ,进入cordinovet.github.io/source目录下,创建一个记事本文件,输入你的域名,保存即可。

我的是“site.wnag.com.cn”,不用加http(s)://

配置网站

初始化我们的网站,输入hexo init初始化文件夹,接着输入npm install安装必备的组件。

这样本地的网站配置也弄好啦,输入hexo g生成静态网页,然后输入hexo s打开本地服务器,然后浏览器打开http://localhost:4000/,就可以看到我们的博客。

若出现hexo s失败的问题,原因可能有二:其一是因为前面在修改配置文件_config.yml的时候,可能没配置好,多空格或少空格,其二可能是端口的问题,hexo s -p 2333改一下端口后再hexo s试试看。

设置hexo主题

这里博主用的是huno主题,主题很简约,且响应式设计做的不错。

附地址,按里面操作即可。

Huno

去Github绑定域名

登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名(site.wnag.com.cn),点击save保存。

然后,进入本地博客cordinovet.github.io/source目录下,创建一个记事本文件,输入你的域名(site.wnag.com.cn)即可。

将本地博客上传至GitHub

命令如下:

npm install --save hexo-deployer-git

hexo d

输入GitHub账号和密码即可。

到此大功告成。

另外可以不定时对远程仓库进行clone备份

对远程仓库进行clone备份

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

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

参考

超详细Hexo+Github博客搭建小白教程

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

Hexo + GitHub (Coding) Pages 搭建博客

本文标题:《用GitHub Pages和Hexo搭建个人博客小站》

本文链接:https://wnag.com.cn/951.html

特别声明:除特别标注,本站文章均为原创,本站文章原则上禁止转载,如确实要转载,请电联:wangyeuuu@qq.com,尊重他人劳动成果,谢过~


正因为有要好好实现的梦想,所以今天也要好好加油。