Github + Hexo 制作静态网站
软件安装
- 安装Node.js、git,点击进入下载网站。
- 检验git是否安装成功,同时按下
Win
键和R
键打开运行窗口,输入cmd
,打开命令提示符,分别输入以下命令:
git --version
node -v
npm -v
有相应版本信息显示则安装成功。若安装成功,在桌面右键鼠标,可以看到菜单里多了Git GUI Here
和Git Bash Here
两个选项,第一个是图形界面的Git操作,另一个是命令行。 - git更新方法,输入命令:
git clone https://github.com/git/git
Hexo
安装
- 选择一个磁盘,新建并重命名文件夹(我的文件夹为:C:/satparamita),博客相关文件将储存在此文件夹下。在该文件夹下右键点击
Git Bash Here
,输入以下npm命令即可安装。第一个命令表示安装hexo,第二个命令表示安装hexo部署到git page的deployer。需要几十秒。
npm install hexo-cli -g
npm install hexo-deployer-git --save
- Hexo初始化配置,在刚才新建的文件夹里面再次新建一个
Hexo
文件夹,进入该文件夹,右键点击Git Bash Here
,输入命令:hexo init
安装需要几十秒,安装完成后,将会在指定文件夹中新建所需要的文件。
升级
目前不用升级,以后想要升级,请参考以下:
- 全局升级hexo-cli,先
hexo version
查看当前版本,然后npm i hexo-cli -g
,再次hexo version
查看是否升级成功。 - 使用
npm install -g npm-check
和npm-check
,检查系统中的插件是否有升级的,可以看到之前都安装了哪些插件。 - 使用
npm install -g npm-upgrade
和npm-upgrade
,升级系统中的插件。 - 使用
npm update -g
和npm update --save
,更新全局包和依赖包。
本地查看效果
- 执行以下命令,
hexo generate
或者hexo g
、hexo server
或者hexo s
。 - 执行完即可登录
http://localhost:4000/
查看效果。
显示以下信息说明操作成功:
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
将博客部署到 Github Pages 上
至此,本地博客就搭建成功了,但是只能通过本地连接查看博客。想要让其他人也能访问,就需要将博客部署到Github Pages上。
- 注册Github账户。创建项目代码库,点击
New repository
开始创建。 - 配置SSH密钥,配置SSH密钥后才可以通过git操作实现本地代码库与Github代码库同步。在第一次新建的文件夹里(我的文件夹为:C:/satparamita)右键点击
Git Bash Here
,输入以下命令:
ssh-keygen -t rsa -C "liyiling1030@outlook.com"
引号里面填写你的邮箱地址,注意两边加引号。之后会出现:
Generating public/private rsa key pair.Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
可以直接回车将密钥按默认文件存储,然后会出现:
Enter passphrase (empty for no passphrase):
要输入密码,直接回车就行
Enter same passphrase again:
接下来屏幕会显示:
Your identification has been saved in /c/Users/you/.ssh/id_rsa.Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.The key fingerprint is:
这里是各种字母数字组成的字符串,结尾是你的邮箱。
The key's randomart image is:
这里也是各种字母数字符号组成的字符串。
运行以下命令,将公钥的内容复制到系统粘贴板上。
clip < ~/.ssh/id_rsa.pub
。 - 在GitHub账户中添加你的公钥,登录GitHub,头像–>
Settings
–>SSH and GPG Keys
–>New SSH key
,粘贴密钥。 - 测试,输入以下命令:注意不要做任何更改!
ssh -T git@github.com
- 配置Git个人信息,Git会根据用户的名字和邮箱来记录提交,GitHub也是用这些信息来做权限的处理,输入以下命令设置个人信息,把名称和邮箱替换成你的,名字可以不是GitHub的昵称,建议与GitHub一致。
git config --global user.name "paramita"
git config --global user.email "liyiling1030@outlook.com"
注意加引号。至此SSH Key
配置成功,本机已成功连接到Github.
将本地的Hexo文件更新到Github的库中
- 登录Github打开自己的项目
https://github.com/yousite/
; - 点击绿色
Code
按钮,选择SSH
,一键复制地址; - 进入Hexo文件夹,打开该文件夹下的
_config.yml
,修改为:
1 | deploy: |
repository:
后面改成你的。注意:冒号后面有一个空格!改完之后一定要保存!
- 在Hexo文件夹下分别执行命令:
hexo g
、hexo d
或者直接执行hexo g -d
。执行完之后会让你输入你的Github的账号和密码。如果此时报以下错误,说明你的deployer没有安装成功。
ERROR Deployer not found: git
需要执行以下命令再安装一次:
npm install hexo-deployer-git --save
再执行hexo g -d
,你的博客就会部署到Github上了。
PS:在以后的部署过程中,如果部署失败,或者出现Please make sure you have the correct access rights and the repository exists.
。
解决办法:删除.deploy_git
文件夹,输入git config --global core.autocrlf false
,然后依次执行:hexo clean
hexo g -d
主要是要删除.deploy_git
文件夹。
或者
git config --global user.name "paramita"
git config --global user.email "liyiling1030@outlook.com"
或者
hexo config deploy.repository git@github.com:satparamita/paramita.git
我在网上找到以下建议:不要使用hexo g -d
或者hexo d -g
这类组合命令。使用hexo clean && hexo g && hexo s
本地预览,hexo clean
为必须选项。hexo d
要单独执行,其他命令可以组合执行,否则就会导致无法推送文件。一般多推送几次就能成功。
可能是由于墙的原因,也可能和系统有关,重装系统后可能会解决。
在博客上发表文章
- 在
\Hexo\source\_posts
目录下新建文件,后缀为.md
,.md
文件可以使用支持Markdown语法的编辑器编辑。或者将写好的文章(.md文件)粘贴到\Hexo\source\_posts
文件夹下。 - 然后在hexo文件夹里
hexo g -d
上传,hexo s
本地预览。在文章开头添加以下内容,注意冒号后面有一个空格。
1 | --- |
更换自己喜欢的主题
- 找到主题下载地址,比如要安装
next
主题,在hexo文件夹里右键Git Bash Here
,输入命令:
git clone https://github.com/next-theme/hexo-theme-next themes/next
主题会下载到themes
目录下的next
文件夹。 - 打开Hexo文件夹下的站点配置文件
_config.yml
,找到关键字theme
,修改参数为:theme:next
,注意冒号后面有一个空格!
更多主题设置请看我的文章Next主题配置1和Next主题配置2。
自定义域名
- 购买域名,需要实名认证,域名的服务状态可能要几天后才会显示正常,显示正常后才能访问。
- 在此期间添加解析,以我的为例,博客原地址是
https://satparamita.github.io/paramita/
,解析后指向购买的域名https://satparamita.top
。建议记录类型选择CNAME,输入记录值satparamita.github.io
。 - 等待域名的服务状态为正常,正常后,在
Hexo/source
文件夹下创建名为CNAME
的文件(注意没有后缀名),在里面写上购买的域名。比如我的:satparamita.top
,没有https://
。hexo g -d
推送至github。 - 在github上打开项目的
Settings
设置,在GitHub Pages
的Custom domain
设置里填上购买的域名。勾选下方的强制使用https
。设置成功后,再打开博客地址https://satparamita.github.io/paramita/
即转向新域名https://satparamita.top
。
SEO推广
搭建完博客,博客的文章在谷歌和百度都搜索不到,因为需要SEO优化,SEO即Search Engine Optimization,搜索引擎优化。
- 首先生成站点地图sitemap,用于通知搜索引擎网站上有哪些可供抓取的网页,以便搜索引擎智能地抓取网站。
- 安装sitemap自动生成插件:
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
- 将sitemap文件添加到站点配置
_config.yml
中。
1 | sitemap: |
- 执行
hexo g
就能在Hexo/public
文件夹中生成sitemap.xml
和baidusitemap.xml
。其中第一个要提交给google,第二个提交给Baidu。
提交站点到百度
- 注册百度站长平台,有百度账号即可。点击用户中心,进入站点管理,点击添加网站,将网站链接提交到百度。
- 正式提交有三种验证方式,我选择Html标签验证,在
themes\next\layout\_partials\head\head.njk
中第二行开始添加百度提供的验证代码:
<meta name="baidu-site-verification" content="xxxxxxxxxxx" />
。
添加后保存,执行hexo d -g
,然后点击完成验证,通过即可。 - 在主题配置文件中找到seo。将
content="xxxxxxxxxxx"
里的内容添加到主题配置里:
baidu_site_verification: xxxxxxx
- 回到链接提交处,选择自己的站点网址,在
普通收录
里的资源提交
,选择sitemap
,按照提示的格式添加自己的baidusitemap.xml文件。 - 自动提交,参考hexo-seo-autopush。
提交站点到Google
- 与提交到百度差不多,首先保证能连到谷歌。打开Google Search Console,根据提示注册好之后,添加博客域名。
- 验证站点,我选择了备用方法中的HTML标记,将google给出的代码
<meta name="google-site-verification" content="xxxxxxxxxx" />
复制到themes\next\layout\_partials\head\head.njk
第二行。
添加后保存,执行hexo d -g
,稍后就验证成功了。 - 在主题配置文件中找到seo。将
content="xxxxxxxxxxx"
里的内容添加到主题配置里:
google_site_verification: xxxxxxx
- 在
站点地图
里添加新的站点地图,输入sitemap.xml
。
添加蜘蛛协议
网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取。robots.txt通常存放于Hexo/public
文件夹。由于每次hexo clean
都会清空public文件夹,所以把robots.txt文件放在source文件夹下,我的robots.txt内容为:
1 | User-agent: * |
其中Allow后面的就是menu,可自行修改,将satparamita.top
改成自己的域名,然后hexo g
提交。
验证站点是否被收录。
在搜索引擎搜索框输入site:satparamita.top
,可以查看域名是否被该搜索引擎收录。如果没有找到,说明没有被收录。一般需要几个星期。
附
有时候需要在github里删除某些文件或文件夹,而删除按钮比较隐蔽,以下操作供参考。
- 删除github文件,点击
Go to file
,选中文件,打开,点击删除图标,然后提交。 - 删除repository,打开
repository
,点击Settings
,下拉找到红色Delete this repository
。