为了账号安全,请及时绑定邮箱和手机立即绑定

Git-Github-Hexo搭建博客

标签:
Html5

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


新电脑与新建博客步骤类似,就直接从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 "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
      ```
    $ 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
      ```
    • 复制ssh

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

    • 在github中添加公钥

      clip < ~/.ssh/id_rsa.pub
    • 测试

    • 不存在的话新建密钥

    • 查看是否有密钥

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

# Deployment## Docs: https://hexo.io/docs/deployment.html  https://gitee.com/zzw1024/myBlog.gitdeploy:  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: falseprism_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账户也要注册!)

    <script async class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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. 官网点击注册(sign up),进入注册页面

  2. 在注册页面填写你的信息(网站地址不可以是二级域名)

  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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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-所有文章均有广告

  1. 在网页上找到“广告” -> “广告单元” -> “创建新的广告单元” -> “展示广告”

  2. 然后再界面里面先填写一个名字(例如ad_google_1)

  3. 点击创建

  4. 将生成的代码添加到
    博客目录

添加完毕

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

网页上传

hexo clean
hexo g
hexo d
  • 等待一小时左右大约会出现广告

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消