年轻人的第一个网站｜hexo+Github详细搭建教程

2021-02-17 本文已影响0人 GeneNote基因笔记

之前一直在寻找合适的建站方法，想把自己的写的文章和拍的照片视频放上去。偶然看到一个主题特别喜欢，突然有了搭建下去的冲动，开始了人生中第一个搭建网站之路。

搭建步骤

购买域名

创建GitHub仓库

安装Git

安装Node.js

安装Hexo

推送网站

绑定域名

更换主题

学习MarkDown语法

发布文章

使用图床

购买域名

域名注册商有很多，国内用户推荐在阿里云万网购买，除去优惠算是最便宜的了。

https://wanwang.aliyun.com/

购买之后可以自定义DNS服务器，最后续CNAME作准备。

创建GitHub仓库

当然先要注册一个GitHub账户啦，注册之后，新建一个仓库。假如你的用户名是 biowr，创建的仓库名就要是这样的 biowr.github.io , 其他默认就好。

安装Git

官网地址：https://git-scm.com/about

选择合适的版本安装

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

gitconfig--globaluser.name"你的GitHub用户名"

gitconfig--globaluser.email"你的GitHub注册邮箱"

生成ssh密钥文件：

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

然后找到生成的.ssh的文件夹中的id_rsa.pub密钥，将内容全部复制到github

打开GitHub_Settings_keys 页面，新建new SSH Key

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

安装Node.js

官网下载地址：https://nodejs.org/zh-cn/download/

选择合适的版本安装

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

安装Hexo

Hexo就是我们的个人博客网站的框架，这里需要自己在电脑常里创建一个文件夹，可以命名为Blog，Hexo框架与以后你自己发布的网页都在这个文件夹中。创建好后，进入文件夹中，选择终端运行。

输入：

npminstall-ghexo-cli

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

hexo init

推送网站

修改根目录里的_config.yml文件称为站点配置文件，如下图

下一步将我们的Hexo与GitHub关联起来，打开站点的配置文件_config.yml，翻到最后修改为：

deploy:

type: git

repo: 这里填入你之前在GitHub上创建仓库的完整路径，记得加上 .git

branch: master参考如下：

其实就是给hexo d 这个命令做相应的配置，让hexo知道你要把blog部署在哪个位置，很显然，我们部署在我们GitHub的仓库里。最后安装Git部署插件，输入命令：

npm install hexo-deployer-git --save

这时，我们分别输入三条命令：

hexo g

hexo d

hexo d 就是部署网站命令，d是deploy的缩写。完成后，打开浏览器输入刚刚的仓库名biowr.github.io，就可以看到自己的网站啦

绑定域名

在仓库的settings 绑定自己的域名，然后在博客根目录source文件夹创建CNAME文件，新建txt文档，填写自己绑定的域名，去掉文件后缀。

接着进入博客目录中，打开命令行，依次输入：

hexo clean

hexo g

hexo d

这时候打开浏览器在地址栏输入你的个性化域名将会直接进入你自己搭建的网站。

更换主题

如果你不喜欢Hexo默认的主题，可以更换不同的主题，主题传送门：Themes ，我自己使用的是standrews，这个主题是我向作者10美元购买的，可以在blog目录中的themes文件夹中查看你自己主题是什么。现在把默认主题更改成Next主题，在blog目录中（就是命令行的位置处于blog目录）打开命令行输入：

git clone https://github.com/sharvaridesai/hexo-theme-edinburgh themes/edinburgh

这是将主题下载到blog目录的themes主题下的文件夹中。打开站点的_config.yml配置文件，修改主题为standrews