Git-Github-Hexo搭建博客

Posted 2020-12-09 zzw1024

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Git-Github-Hexo搭建博客相关的知识，希望对你有一定的参考价值。

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

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

Git + Github + Hexo

安装Git

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

安装Node.js

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

安装Hexo

使用git安装：

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

hexo初始化

hexo init

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

部署到远程

以下操作都是在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

上传

hexo g -d

如果报错

ERROR Deployer not found: git

再次运行

npm install hexo-deployer-git --save

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

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

美化

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

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

备份博客文件
只针对博客文件所在的第一台电脑中
直接在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. 把这一串代码放在
  博客目录 hemesyilialayout_partialhead.ejs文件的与之间
2. 更新上传
返回官网进行确认检测
审核通过
稍等一天时间，如果没有问题，即可审核通过。
有问题就改问题，然后在申请。

添加展示广告

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

	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

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

以上是关于Git-Github-Hexo搭建博客的主要内容，如果未能解决你的问题，请参考以下文章

为 Blogger 上的博客格式化代码片段 [关闭]

Wordpress阻止访问wp admin€“wpsnipp.com网站你博客的Wordpress代码片段

spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

回归 | js实用代码片段的封装与总结（持续更新中...）

maven+spring boot搭建简单微服务

（转）博客园登陆__JSEncrypt 分析