Git-Github-Hexo搭建博客(一)

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


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


Git + Github + Hexo

  1. 安装Git

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

  1. 安装Node.js

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

  1. 安装Hexo
  • 使用git安装:
npm install hexo-cli -g
npm install hexo-deployer-git --save
  • hexo初始化
hexo init

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


  1. 部署到远程

以下操作都是在git中执行

  • 注册github账号(或者coding或者码云)

  • 新建项目

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

    • 查看是否有密钥
    $ cd ~/.ssh
    • 不存在的话新建密钥
    $ssh-keygen -t rsa -C ""
    #这将按照你提供的邮箱地址,创建一对密钥
    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 
      ```
    • 在github中添加公钥

      • 复制ssh
      clip < ~/.ssh/id_rsa.pub
      • 进入github的账户设置中,选择ssh keys 直接粘贴
    • 测试

    $ ssh -T
    + 反馈
      ```
      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
  1. 上传
hexo g -d

如果报错

ERROR Deployer not found: git

再次运行

npm install hexo-deployer-git --save
  1. 添加域名
    只有部署在GitHub不一定需要添加域名,其他仓库都需要
    在仓库的项目设置中找到添加域名的项,把你子啊阿里或者其他地方买的域名写入
  • 阿里购买域名
    登录阿里云,选择域名进行购买,购买完成后选择自己的后台控制,进行域名解析,一天后域名成效
  1. 美化

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

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: matery  //主题名字
  1. 备份博客文件
    只针对博客文件所在的第一台电脑中
    直接在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>
    1. 把这一串代码放在
      博客目录\themes\yilia\layout_partial\head.ejs文件的

      与之间
    2. 更新上传

  • 返回官网进行确认检测

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

  • 添加展示广告

    1. 在网页上找到“广告” -> “广告单元” -> “创建新的广告单元” -> “展示广告”
    2. 然后再界面里面先填写一个名字(例如ad_google_1)
    3. 点击创建
    4. 将生成的代码添加到
      博客目录
    \themes\yilia\layout\_partial\article.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
  • 等待一小时左右大约会出现广告