前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用GitHub Pages和Hexo搭建个人博客小站

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

作者头像
可定
发布2020-04-20 15:17:45
4460
发布2020-04-20 15:17:45
举报
文章被收录于专栏:细嗅蔷薇细嗅蔷薇

因为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配置信息:

代码语言:javascript
复制
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件:

代码语言:javascript
复制
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) 其他默认 最后点确认

修改配置文件_config.yml

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

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

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

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

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

代码语言:javascript
复制
deploy:
    type:""

改成

代码语言:javascript
复制
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

命令如下:

代码语言:javascript
复制
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 搭建博客

版权所有:可定博客 © WNAG.COM.CN

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

本文链接:https://cloud.tencent.com/developer/article/1616960

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-03-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装Node.js
  • 安装Git
  • 设置SSH和Git账户
  • 新建repository
  • 安装Hexo
  • 连接自有域名和Github
  • 修改配置文件_config.yml
  • 添加CNAME解析文件
  • 配置网站
  • 设置hexo主题
  • 去Github绑定域名
  • 将本地博客上传至GitHub
  • 对远程仓库进行clone备份
  • 参考
相关产品与服务
代码托管
CODING 代码托管(CODING Code Repositories,CODING-CR)是为开发者打造的云端便捷代码管理工具,旨在为更多的开发者带去便捷、高效的开发体验,全面支持 Git/SVN 代码托管,包括代码评审、分支管理、超大仓库等功能。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档