Git-Github-Hexo搭建博客（一）

新建博客以及新电脑使用博客说明

---

新电脑与新建博客步骤类似，就直接从GitHub中clone的文件放入hexo文件中
注意，好像是不要hexo初始化，直接将clone的文件放入就行
注意，添加node插件，需要哪些后面会说
注意，后面hexo g -d 上传部分

---

Git + Github + Hexo

1. 安装Git

去Git官网根据你的电脑参数，下载对应版本。

2. 安装Node.js

在 Windows 环境下安装 Node.js 非常简单，仅须到官网下载安装文件并执行即可完成安装。

3. 安装Hexo

• 使用git安装：

npm install hexo-cli -g
npm install hexo-deployer-git --save

• hexo初始化

hexo init

---

以下部分只是针对新建博客， 新电脑不需要的

---

4. 部署到远程

以下操作都是在git中执行

• 注册github账号（或者coding或者码云）

• 新建项目

  • github注意
    项目名称严格为 GitHub账号名 + .github.io
    在网页上直接输入该项目名字就可以访问博客了，这是部署到GitHub的最大优势！

• 配置SSH密钥

  • 查看是否有密钥

  $ cd ~/.ssh
  

  • 不存在的话新建密钥

  $ssh-keygen -t rsa -C "your_email@example.com"
  #这将按照你提供的邮箱地址，创建一对密钥
  Generating public/private rsa key pair.
  Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter]
  

    + 相关提示
    ```
    Enter passphrase (empty for no passphrase): [Type a passphrase]
    Enter same passphrase again: [Type 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:
    01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_email@example.com
    ```
  

  • 在github中添加公钥

    • 复制ssh

    clip < ~/.ssh/id_rsa.pub
    

    • 进入github的账户设置中，选择ssh keys 直接粘贴

  • 测试

  $ ssh -T git@github.com
  

    + 反馈
    ```
    The authenticity of host 'github.com (207.97.227.239)' can't be established.
    RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
    Are you sure you want to continue connecting (yes/no)?   //输入yes
    ```
  

• 上传github中 并且分流到其他仓库
  在congfig中进行设置

# Deployment
## Docs: https://hexo.io/docs/deployment.html  https://gitee.com/zzw1024/myBlog.git
deploy:
  type: git
  repository: 
    github: https://github.com/zzw1024/zzw1024.github.io.git    //github项目地址
    gitee: https://gitee.com/zzw1024/myBlog.git                 //码云项目地址
  branch: master

5. 上传

hexo g -d

如果报错

ERROR Deployer not found: git

再次运行

npm install hexo-deployer-git --save

7. 添加域名
   只有部署在GitHub不一定需要添加域名，其他仓库都需要
   在仓库的项目设置中找到添加域名的项，把你子啊阿里或者其他地方买的域名写入

• 阿里购买域名
  登录阿里云，选择域名进行购买，购买完成后选择自己的后台控制，进行域名解析，一天后域名成效

8. 美化

从网上找到的主题clone到theme文件夹下
然后更改config

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery  //主题名字

9. 备份博客文件
   只针对博客文件所在的第一台电脑中
   直接在hexo文件内git init
   然后在上传到你新建的一个项目中（最好是私有仓库，因为里面有你的账号信息）

config.yml设置额外添加说明

---

一般在新电脑中需要添加而外的功能
注意，一般clone下来的config.yml已经有功能，只不过需要npm安装环境
需不需要，先运行博客试看一下，然后再查看有没有设置，最后再考虑要不要安装

---

以下操作都是在hexo文件在的cmd中执行

修改新建文章、page、draft的自动添加内容

在scaffolds的各个文件里面直接设置就行

修改语言

找到language： 后面一定是选中主题下language文件下的语言语言名字，比如：zh-CN
记得将自己主题设置config及其相关设置文件下的英文对应的中文名添加到主题下language/zh-CN 里面

代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

中文链接转拼音（可选的）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

文章字数统计插件（可选的）

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。
安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可：

wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

添加 RSS 订阅支持（可选的）

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

添加goole广告投送

• 注册登录google Adsense官网
  打开网站之后就可以开始注册了（即使你有google账户也要注册！）

  1. 官网点击注册（sign up）,进入注册页面
  2. 在注册页面填写你的信息（网站地址不可以是二级域名）
  3. 在之后填写你的地址信息
  4. 地址信息填完毕之后会给你一串代码，类似如下：

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-8955547868703063",
      enable_page_level_ads: true
    });
  </script>
  

  5. 把这一串代码放在
     博客目录 hemesyilialayout_partialhead.ejs文件的 与之间

  6. 更新上传

• 返回官网进行确认检测

• 审核通过
  稍等一天时间，如果没有问题，即可审核通过。
  有问题就改问题，然后在申请。

• 添加展示广告

  1. 在网页上找到“广告” -> “广告单元” -> “创建新的广告单元” -> “展示广告”
  2. 然后再界面里面先填写一个名字(例如ad_google_1)
  3. 点击创建
  4. 将生成的代码添加到
     博客目录

  	hemesyilialayout\_partialarticle.ejs
  

  中对应适当位置即可，注意别让广告扰乱了页面布局，影响全局美感。

  添加代码如下：

  可以在文章开头添加：
  <!--文章头google图片-->
  <% if ((theme.googlead_type === 2 || (theme.googlead_type === 1 && post.googlead)) && !index){ %>
      <hr>
      <strong>⬇️下面这个看起来像广告的东西，其实是只个图片，根本打不开的。不过听说有时候⬇️</strong>
      <br>
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- googlead1 -->
      <ins class="adsbygoogle"
           style="display:block"
           data-ad-client="ca-pub-8955547868703063"
           data-ad-slot="3853918361"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
      <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
  <% } %>
  <!--文章头google图片结束-->
  可以在结尾处添加：
  <!-- 尾google广告 -->
        <% if ((theme.googlead_type === 2 || (theme.googlead_type === 1 && post.googlead)) && !index){ %>
            <hr>
            <strong>⬇️下面这个才是真正的广告哦，如果感觉真的从文章中有带走新东西的话，可以帮我点一下哦⬇️</strong>
          <br>
            这里是google网页生成的代码
        <% } %>
  <!-- 尾google广告 -->
  

  然后还需要在

  /theme/yilia/_config.yml
  

  中合适位置添加

  #google广告基础设定：0-关闭广告； 1-文章对应的md文件里有googlead: true属性，才有广告； 2-所有文章均有广告
  googlead_type: 1
  

  使用教程如上面提示：
  0-关闭广告；
  1-文章对应的md文件里有googlead: true属性，才有广告；
  2-所有文章均有广告

• 添加完毕

  在网页中点击“大功告成”

• 网页上传

hexo clean
hexo g
hexo d

• 等待一小时左右大约会出现广告