Github + Hexo 制作静态网站

软件安装

  1. 安装Node.jsgit,点击进入下载网站。
  2. 检验git是否安装成功,同时按下Win键和R键打开运行窗口,输入cmd,打开命令提示符,分别输入以下命令:
    git --version
    node -v
    npm -v
    有相应版本信息显示则安装成功。若安装成功,在桌面右键鼠标,可以看到菜单里多了 Git GUI HereGit Bash Here两个选项,第一个是图形界面的Git操作,另一个是命令行。
  3. git更新方法,输入命令:
    git clone https://github.com/git/git

Hexo

安装

  1. 选择一个磁盘,新建并重命名文件夹(我的文件夹为:C:/satparamita),博客相关文件将储存在此文件夹下。在该文件夹下右键点击Git Bash Here,输入以下npm命令即可安装。第一个命令表示安装hexo,第二个命令表示安装hexo部署到git page的deployer。需要几十秒。
    npm install hexo-cli -g
    npm install hexo-deployer-git --save
  2. Hexo初始化配置,在刚才新建的文件夹里面再次新建一个Hexo文件夹,进入该文件夹,右键点击Git Bash Here,输入命令:hexo init
    安装需要几十秒,安装完成后,将会在指定文件夹中新建所需要的文件。

升级

目前不用升级,以后想要升级,请参考以下:

  1. 全局升级hexo-cli,先hexo version查看当前版本,然后npm i hexo-cli -g,再次hexo version查看是否升级成功。
  2. 使用npm install -g npm-checknpm-check,检查系统中的插件是否有升级的,可以看到之前都安装了哪些插件。
  3. 使用npm install -g npm-upgradenpm-upgrade,升级系统中的插件。
  4. 使用npm update -gnpm update --save,更新全局包和依赖包。

本地查看效果

  1. 执行以下命令,hexo generate或者hexo ghexo server或者hexo s
  2. 执行完即可登录http://localhost:4000/查看效果。
    显示以下信息说明操作成功:
    INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

将博客部署到 Github Pages 上

至此,本地博客就搭建成功了,但是只能通过本地连接查看博客。想要让其他人也能访问,就需要将博客部署到Github Pages上。

  1. 注册Github账户。创建项目代码库,点击New repository开始创建。
  2. 配置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
  3. 在GitHub账户中添加你的公钥,登录GitHub,头像–>Settings–>SSH and GPG Keys–>New SSH key,粘贴密钥。
  4. 测试,输入以下命令:注意不要做任何更改!
    ssh -T git@github.com
  5. 配置Git个人信息,Git会根据用户的名字和邮箱来记录提交,GitHub也是用这些信息来做权限的处理,输入以下命令设置个人信息,把名称和邮箱替换成你的,名字可以不是GitHub的昵称,建议与GitHub一致。
    git config --global user.name "paramita"
    git config --global user.email "liyiling1030@outlook.com"
    注意加引号。至此SSH Key配置成功,本机已成功连接到Github.

将本地的Hexo文件更新到Github的库中

  1. 登录Github打开自己的项目https://github.com/yousite/
  2. 点击绿色Code按钮,选择SSH,一键复制地址;
  3. 进入Hexo文件夹,打开该文件夹下的_config.yml,修改为:
1
2
3
4
deploy:
type: 'git'
repository: git@github.com:satparamita/paramita.git
branch: master

repository:后面改成你的。注意:冒号后面有一个空格!改完之后一定要保存

  1. 在Hexo文件夹下分别执行命令:hexo ghexo 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要单独执行,其他命令可以组合执行,否则就会导致无法推送文件。一般多推送几次就能成功。
可能是由于墙的原因,也可能和系统有关,重装系统后可能会解决。

在博客上发表文章

  1. \Hexo\source\_posts目录下新建文件,后缀为.md.md文件可以使用支持Markdown语法的编辑器编辑。或者将写好的文章(.md文件)粘贴到 \Hexo\source\_posts 文件夹下。
  2. 然后在hexo文件夹里hexo g -d上传,hexo s本地预览。在文章开头添加以下内容,注意冒号后面有一个空格。
1
2
3
4
5
6
7
8
9
10
---
title: #标题; 必填
catagories: #分类; 选填
tags: # 标签;选填
comments: #是否开启评论 true false
abbrlink: #永久链接,需要先设置永久链接
date: # 文章发布日期;选填
updated: #文章更新日期; 选填
description: #文章描述,显示在标题下面; 选填
---

更换自己喜欢的主题

  1. 找到主题下载地址,比如要安装next主题,在hexo文件夹里右键Git Bash Here,输入命令:
    git clone https://github.com/next-theme/hexo-theme-next themes/next
    主题会下载到themes目录下的next文件夹。
  2. 打开Hexo文件夹下的站点配置文件_config.yml,找到关键字theme,修改参数为:theme:next,注意冒号后面有一个空格!

更多主题设置请看我的文章Next主题配置1Next主题配置2

自定义域名

  1. 购买域名,需要实名认证,域名的服务状态可能要几天后才会显示正常,显示正常后才能访问。
  2. 在此期间添加解析,以我的为例,博客原地址是https://satparamita.github.io/paramita/,解析后指向购买的域名https://satparamita.top。建议记录类型选择CNAME,输入记录值satparamita.github.io
  3. 等待域名的服务状态为正常,正常后,在Hexo/source文件夹下创建名为CNAME的文件(注意没有后缀名),在里面写上购买的域名。比如我的:satparamita.top,没有https://hexo g -d推送至github。
  4. 在github上打开项目的Settings设置,在GitHub PagesCustom domain设置里填上购买的域名。勾选下方的强制使用https。设置成功后,再打开博客地址https://satparamita.github.io/paramita/即转向新域名https://satparamita.top

SEO推广

搭建完博客,博客的文章在谷歌和百度都搜索不到,因为需要SEO优化,SEO即Search Engine Optimization,搜索引擎优化。

  1. 首先生成站点地图sitemap,用于通知搜索引擎网站上有哪些可供抓取的网页,以便搜索引擎智能地抓取网站。
  2. 安装sitemap自动生成插件:
    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save
  3. 将sitemap文件添加到站点配置_config.yml中。
1
2
3
4
5
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml
url: https://satparamita.top
  1. 执行hexo g就能在Hexo/public文件夹中生成sitemap.xmlbaidusitemap.xml。其中第一个要提交给google,第二个提交给Baidu。

提交站点到百度

  1. 注册百度站长平台,有百度账号即可。点击用户中心,进入站点管理,点击添加网站,将网站链接提交到百度。
  2. 正式提交有三种验证方式,我选择Html标签验证,在themes\next\layout\_partials\head\head.njk中第二行开始添加百度提供的验证代码:
    <meta name="baidu-site-verification" content="xxxxxxxxxxx" />
    添加后保存,执行hexo d -g,然后点击完成验证,通过即可。
  3. 在主题配置文件中找到seo。将content="xxxxxxxxxxx"里的内容添加到主题配置里:
    baidu_site_verification: xxxxxxx
  4. 回到链接提交处,选择自己的站点网址,在普通收录里的资源提交,选择sitemap,按照提示的格式添加自己的baidusitemap.xml文件。
  5. 自动提交,参考hexo-seo-autopush

提交站点到Google

  1. 与提交到百度差不多,首先保证能连到谷歌。打开Google Search Console,根据提示注册好之后,添加博客域名。
  2. 验证站点,我选择了备用方法中的HTML标记,将google给出的代码<meta name="google-site-verification" content="xxxxxxxxxx" />复制到themes\next\layout\_partials\head\head.njk第二行。
    添加后保存,执行hexo d -g,稍后就验证成功了。
  3. 在主题配置文件中找到seo。将content="xxxxxxxxxxx"里的内容添加到主题配置里:
    google_site_verification: xxxxxxx
  4. 站点地图里添加新的站点地图,输入sitemap.xml

添加蜘蛛协议

网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取。robots.txt通常存放于Hexo/public文件夹。由于每次hexo clean都会清空public文件夹,所以把robots.txt文件放在source文件夹下,我的robots.txt内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /page/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: https://satparamita.top/sitemap.xml
Sitemap: https://satparamita.top/baidusitemap.xml

其中Allow后面的就是menu,可自行修改,将satparamita.top改成自己的域名,然后hexo g提交。

验证站点是否被收录。

在搜索引擎搜索框输入site:satparamita.top,可以查看域名是否被该搜索引擎收录。如果没有找到,说明没有被收录。一般需要几个星期。

有时候需要在github里删除某些文件或文件夹,而删除按钮比较隐蔽,以下操作供参考。

  1. 删除github文件,点击Go to file ,选中文件,打开,点击删除图标,然后提交。
  2. 删除repository,打开repository,点击Settings,下拉找到红色Delete this repository