如何部署hexo博客:从零开始到搭建完整


前言

我也是一时兴起(主要就是闲的),最开始在b站看到一个教程视频然后就想自己去搭建一个虽然过程非常痛苦,但当我完全搭建好了之后,再想想确实又没什么困难的,拥有一个个人网站会有很多好处,便于别人认识了解你,面试简历也都会有所加分,我在搭建过程参考网上教程遇见许多坑,希望不要再掉坑里,(小声说我觉得掉到坑里才学到东西)所以决定自己写一篇教程。一是为了帮助同样有需要的你,二来自己下次搭建的时候也能参考,三是总结一下搭建过程中所学的知识。由于我本身也是小白,所以可能会有一些专业术语的错误见谅。

长文警告:本文将包括本地部署hexo,hexo—matery主题美化,hexo部署到服务器,hexo seo优化,由于感觉文章太长观感不好,所以拆分了文章。

hexo部署到本地

本地nodejs,淘宝云镜像,git环境搭建

1.nodejs搭建教程:

1.1下载:

下载地址:https://nodejs.org/en/download/
一般的Windows系统都选择.msi 64位安装。(.msi是自动安装比较方便)

1.2安装:

正常安装即可最好不要安装到C盘改个安装路径。

1.3查看安装版本:

安装完成后打开终端win+R 输入cmd回车
输入命令node-v查看版本号,出现版本号,说明你的电脑上已经有nodejs,安装成功!

1.4配置nodejs环境:

NodeJS和NPM安装好了以后并不能直接使用,默认情况下,NPM安装的模块并不会安装到NodeJS的程序目录,比如我们安装的时候设置的D盘,“D:\Program Files\nodejs”,而我们使用npm安装一个cluster模块他会出现在C盘默认的路径下面,所以,如果我们不修改npm的模块安装目录,那么它默认情况下都会安装到这里,随着你测试开发各种不同的项目,安装的模块越来越多,这个文件夹的体积就会越来越大,直到占满你的C盘。(网上的说法我觉得只运行hexo不会)所以我们要修改npm的配置。

(1).在nodejs文件夹下,创建两个为文件夹: node_global;node_cache
这是用来放安装过程的缓存文件以及最终的模块配置位置。
(2).使用下面命令将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录
npm config set prefix "node_global文件的路径"
npm config set cache "node_cache的文件路径"
例如:npm config set prefix “D:\Program Files\nodejs\node_global”
(还在win+R调出来的黑色命令框里,输入你自己保存的路径可以在文件夹上复制路径)
(3).高级系统设置——环境变量(上一步完成后要将node_modules文件夹复制到node_global文件夹下)
新增系统变量(右键此电脑图标属性高级系统设置里面环境变量里面):
变量名填:NODE_PATH
变量值填:(你自己的文件路径)
系统变量
将用户变量下的Path修改为D:\Develop\nodejs\node_global 你自己的路径

1.5修改完成后测试:

输入命令:node 回车——再输入 require(“cluster”)能正常使用没出现err这样的内容就算配置成功,网上教程有把“”打成‘’我用了之后显示没有这命令推测是他打错了。我给成”“结果成功了。到这里nodejs就配置好了。

2.淘宝云镜像:

在国内使用npm下载东西可能会比较慢,若配置了淘宝云镜像就可通过国内渠道下载会快很多只需在下载命令前加一个c

2.1验证npm:

win+R 先输入node再进行下面的操作
npm -v
出现版本号代表成功

2.2 先初始化项目的配置依赖清单:

npm init -y

2.3 初始化后会有一个package.json文件,在当前的文件夹在我的电脑文件地址栏输入cmd进入命令符窗口,接下来就可以下载了

比如:下载一个jquery
npm install jquery
执行完之后会生成一个node_modules文件
在里面找到jquery.js引入要用的项目中即可

这是命令示例不用操作
npm install xxx 把模块安装在当前项目中(node_modules)
npm install xxx -g 把模块安装在全局环境中
npm install xxx@1.0.0 安装制定版本 

2.4 npm使用国内淘宝镜像的方法:

命令:

npm config set registry https://registry.npm.taobao.org    
npm config get registry   
npm config get registry  

cnpm v不报错就成功了

使用npm安装:

npm install -g cnpm --registry=https://registry.npm.taobao.org  

3. git的搭建:

注意了,像Git这种服务器在国外的东西,它的官网下载这个软件会非常慢,建议直接在百度上搜索git下载与安装,各种软件园都能直接快速下载,留意一下版本最好不要太旧就行。

安装:  
就按他推荐或者默认的安装即可  
到这一步注意调整您的PATH环境选择第二个    

4. 推荐一个编辑工具便于后面修改创建文件:

notepad++ 可以在百度上搜索下在,我用的是这个当然可以用其他的。    

注册GitHub账号并创建仓库

注册很简单,仓库你的GitHub用户名加github.io如:brqs.github.io

利用脚本快速搭建hexo博客

1. 下载[hexo-script]的安装脚本:

你只需要在某个目录下,右键打开git bash然后执行下面这条命令即可下载完成
curl -O https://cdn.jsdelivr.net/gh/kjhuanhao/hexo-script@master/install.sh
我们更建议直接在releases下载,选择最新版本,只需下载install.sh即可

建议新建一个目录存放此安装脚本,最好是你想存放博客文件的地方.
如图:我创建了一个myblogmyblog文件夹,然后在此文件夹下右键打开git bash

然后运行了下载命令,安装脚本(install.sh)就会下载在你的当前文件夹中

2.自动完成全部安装过程并生成博客文件:

hexo_win的使用
您需要在存放install.sh脚本的目录中,右键打开git bash运行以下命令:

source install.sh hexo_win

提示:大约两分钟的时间,博客即可自动安装完成。有时候可能克隆不了脚本换时间段或者再试一次

当您看到出现Please run hexo s to check it out!的提示,证明您已经安装成功,此时你可以运行hexo s然后查看你的博客

cd hexoblog
hexo s

注意:要先cd到hexoblog目录哦!执行以上命令即可,出现网址即为成功可复制到浏览器访问

3.一键生成SSH秘钥:部署hexo博客的必要之物

git_ssh的使用您需要在存放install.sh脚本的目录中,右键打开git bash运行以下命令:./install.sh git_ssh

可以看到会有四条可执行命令,输入对应数字可以执行对应的命令

1)Key
2)SSH
3)Verify-github
4)Verify-coding

1)Key 执行1后可以一键生成秘钥
如果你的电脑已经存在秘钥,程序将会自动退出

2)SSH 执行2后可以查看你电脑中已生成的秘钥]

3)Verify-github 执行3后可以检查秘钥是否配置github成功

4)Verify-coding 执行4后可以检查秘钥是否配置coding成功生成秘钥后别忘记将秘钥添加到账号里,否则秘钥不会配置成功。

4.使用ssh密匙连接:

4.1

在C盘找到上一步生成的密匙文件右键用notepad++打开复制全选

4.2

在GitHub账户中添加你的公钥在account settings中左边菜单点击“ssh keys”再点击add ssh key 粘贴你的密钥即可再点击add key 就行了。

5up.sh的使用:

5.1

您需要在存放install.sh脚本的目录(你自己创建的hexoblog文件夹的上一级文件夹)中,右键打开git bash运行以下命令:
source install.sh deploy

5.2

需要将up.sh复制到hexoblog文件,也就是复制到你的博客根目录(hexoblog)下

5.3

然后在存放up.sh脚本的目录(hexoblog)中,右键打开git bash运行以下命令:
source up.sh

6.部署博客必要的配置:

6.1

首先你需要用notepad++打开根目录配置文件_config.yml进行必要的修改。

6.2

找到deploy,它一般在最后一行,按照以下的格式修改即可

deploy:
  type: git
  repo: 这里填你的仓库地址,建议使用SSH地址,它是以git开头的
  branch: master     

注意在hexo的配置文件中冒号后面一定有空格,在后续美化过程中可能会需自己修改或者添加。当他提示你缺少空格时可能并不准确在这位置前后去寻找哪里缺少空格慢慢找一定有地方不对。

matery主题的优化:

这一部分是我花的时间最长,但是为了把网站做的好很值,通过这一步也更好的了解了hexo的运行方式。这部分将只包括我选用的功能,试了好多,有些功能很鸡肋或者不是很好看。被我抛弃了。

1.matery主题下载:

主题下载
解压后替换hexoblog下theme文件夹里的那个文件夹整体替换。

2. 主题优化

2.1 切换主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值:theme: hexo-theme-matery同时修改两个 per_page 的分页条数值为 6 的倍数,如:12、18 等,这样文章列表在各个屏幕(电脑,手机,pad)下都能较好的显示。

2.2 新建一些页面

在根目录hexoblog下git bash here 依次输入下列命令

hexo new page "categories"
hexo new page "tags"  
hexo new page "about"  
hexo new page "friends"  
hexo new page "contact"  

网上教程一般都没有提到最后一个这会导致一个问题就是你的留言板页面打不开404,我当时真的搞了好久通过后我自己新加一个页面个人常用网站才解决

然后依次在hexoblog/source/tags(/categorite/about/friends/contact)/index.md 补充以下内容

type: "tags"  
layout: "tags"     
type: "categories"  
layout: "categories"  
type: "about"  
layout: "about"  
type: "friends"  
layout: "friends"   
type: "contact"  
layout: "contact"  

如/source/tags/index.md

---  
title: tags   
date: 2018-09-30 18:23:38  
type: "tags"  
layout: "tags"  
--- 

其中启用友情链接还需要在 source 目录下新建 _data 目录,在 _data 目录中新建 friends.json (新建一个文本文件txt连带后缀重命名修改就好,提示确认就好) 文件,文件内容如下所示:

[{
    "avatar": "http://hesifan.top/medias/avatar.jpg",
    "name": "凡尘纪",
    "introduction": "念念不忘 必有回响",
    "url": "http://hesifan.top/",
    "title": "前去参观"
}, {
    "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2",
    "name": "Fabric",
    "introduction": "A Blockchain Platform for the Enterprise",
    "url": "https://hyperledger-fabric.readthedocs.io/en/master/",
    "title": "前去学习"
}, {
    "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg",
    "name": "BootCDN",
    "introduction": "稳定、快速、免费的前端开源项目 CDN 加速服务。",
    "url": "https://www.bootcdn.cn/",
    "title": "前去加速"
}]  

2.3代码高亮

由于 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:

2.4 搜索

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

npm install hexo-generator-search --save

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

search:
  path: search.xml
  field: post   

2.5 修改页脚

页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。

2.6 修改社交链接

修改社交链接
在主题的 _config.yml 文件中,默认支持 QQ、GitHub 和邮箱的配置,可以在主题文件的 /layout/_partial/social-link.ejs 文件中,新增、修改需要的社交链接地址,增加链接如B站可参考如下代码:

<a href="https://space.bilibili.com/602389627" class="tooltipped" target="_blank" data-tooltip="访问我的B站" data-position="top" data-delay="50">  
    <i class="fa fa-github"></i>
</a>

这是我的B站个人空间你可以换成你自己的

2.7 修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中,可以替换成你的的微信和支付宝的打赏二维码图片。

特别注意修改前查看该图片信息确保你替换的图片和该图一样大小尺寸名称,建议使用ps修改,后面所有对图片的改动都是如此,不再赘叙

2.8文章链接转静态短地址

如果文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件生成文章时生成中文拼音的永久链接,或者用hexo-abbrlink 生成静态文章链接。以下结合hexo-abbrlink生成类似 /yyyy/mmdd+随机数.html 的文章链接地址。

安装命令如下:

npm install hexo-abbrlink --save  

在 Hexo 根目录下的 _config.yml 文件中,修改 permalink: ,并在文件末尾新增 abbrlink:配置项:

permalink: :year/:month:day:abbrlink.html

abbrlink: 
  alg: crc16 #算法选项:crc16丨crc32
  rep: dec #输出进制:dec为十进制,hex为十六进制

2.9 文章字数统计插件

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

安装命令如下:

npm i --save hexo-wordcount  

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

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

注意是主题文件夹里的-ymal文件

2.10自定制修改

在本主题的 _config.yml 中可以修改部分自定义信息,有以下几个部分:
菜单
我的梦想
首页的音乐播放器和视频播放器配置
是否显示
推荐文章名称和按钮配置
favicon 和 Logo
个人信息
TOC 目录
文章打赏信息
复制文章内容时追加版权信息
MathJax
文章字数统计、阅读时长
点击页面的’爱心’效果
我的项目
我的技能
我的相册
Gitalk、Gitment、Valine 和 disqus 评论配置
不蒜子统计和谷歌分析(Google Analytics)
默认特色图的集合当文章没有设置特色图时,本主题会根据文章标题的 hashcode 值取余,来选择展示对应的特色图

2.11 修改 banner 图和文章特色图

可以直接在 /source/medias/banner 文件夹中更换喜欢的 banner 图片,主题代码中是每天动态切换一张,只需 7 张即可。

2.12 [增加看板娘官网地址配置:] https://www.npmjs.com/package/hexo-helper-live2d

1)首先检查博客主目录下面的 package.json里是否有
“hexo-helper-live2d”: “^3.0.3”,依赖,有的话可以先卸载
使用命令:

npm uninstall hexo-helper-live2d     

2)之后再安装:

npm install --save hexo-helper-live2d  

注意:命令都是在你的博客主目录执行

3)安装完成之后在package.json会看到安装的model
下载各种动画model:
[地址]https://github.com/xiazeyu/live2d-widget-models.git

4)下载好之后将packages里的所有动画模板拷贝到博客的node_modules目录里
5)配置博客站点配置文件,_config.yml

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-epsilon2_1  #模板目录,在node_modules里
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #是否在手机进行显示

2.13 新建文章模板修改

首先为了新建文章方便,我们可以修改一下文章模板,可以将/scaffolds/post.md修改为如下代码:

---   
title: {{ title }}   
date: {{ date }}  
author:   
img:   
coverImg:  
top: false   
cover: false   
toc: true   
mathjax: false   
password:   
summary:   
keywords:   
tags:   
categories:  
---

2.14 关闭首页颜色变换

进入主题文件的 /source/css/matery.css文件中,搜索 rainbow来关闭颜色变换:

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色.即滤镜颜色,不想要可以全部注释,或者换成你喜欢的颜色 */ 
}
 @keyframes rainbow {
    /* 动态切换背景颜色.,不想要可以全部注释,或者换成你喜欢的颜色 */
}  

2.15 markdown书写文章用

1)下载markdown安装包
[点我下载]http://editor.md.ipandao.com/ 下载完成之后是一个压缩包,解压。
2)移植文件:

  • 将压缩包解压之后放到 主题文件夹的source->libs目录中。可以将文件夹定改为editorMd
  • 新建一个新的页面。在博客站点目录下新建一个MyMarkdown文件夹,并在文件夹下新建index.md文件。将下面的代码复制到index.md文件夹中。
---
title: editor.md
date: 2020-02-16 11:20:03
type: "MyMarkdown"
layout: "MyMarkdown"
---  

3)导入editor的css和js
打开主题目录下的_config.yml文件,将editor的js文件和CSS写入,如下

4)新建MyMarkdown.ejs文件
在主题文件夹下的layout文件夹中新建MyMarkdown.ejs文件。将下列代码复制到MyMarkdown.ejs文件中。

<link rel="stylesheet" href="<%- theme.libs.css.editormdCss %>">

<style type="text/css">
    /* don't remove. */
    .page-cover {
        /* height: 75vh; */
        height: 940px;
    }

    .editormd {
      top: 76px;
    }

    pre {
      padding: 0;
    }

    .editormd-menu > li.divider {
      overflow: inherit; 
      padding: 5px 0px;
    }

    header .nav-transparent {    /*修改当行兰样式*/
        background-image: linear-gradient(to right, #bf30a3 0%, #0f9d58 100%);
    }

    .editormd-form input[type="text"], 
    .editormd-form input[type="number"] {
        height: 15px;
        margin: 0px;
        font-size: 14px;
    }

    .editormd-form input[type="text"] {
        display: inline-block;
        width: 246px;
    }

    .editormd-dialog-container label {
      font-size: 14px;
      color: #444;
  }

    .editormd-dialog-container select {
      display: inline-block;
      background-color: rgba(255,255,255,0.9);
      width: 182px;
      border-radius: 2px;
      height: 25px;
  }

</style>

<div class="pd-header page-cover">
  <div class="editormd" id="my-editormd">
    <textarea style="display:none;"></textarea>
  </div>
</div>

<script src="<%- theme.libs.js.jquery %>"></script>
<script src="<%- theme.libs.js.editormdJs %>"></script>
<script  type="text/javascript">
  var myEditor;
  $(function() {  
      myEditor = editormd("my-editormd", {
        width   : "98%",
        height  : 840,
        syncScrolling : "single",
        path    : "/libs/editorMd/lib/",
       // theme: "dark",
      //  previewTheme: "dark",
      //  editorTheme: "pastel-on-dark",
        markdown: '',
        codeFold: true,
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持,默认关闭
        flowChart: true,             // 开启流程图支持,默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持,默认关闭,
        htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析,为了安全性,默认不开启   
    });
  });
</script>  

2.16hexo安装插件hexo-admin

hexo使用编辑文章时,若用其原生方式,则不便利,还好官网提供了一款插件hexo-admin界面化了markdown编辑器,只需要访问:http://127.0.0.1:4000/admin 即可方便快捷的进行博文编辑了,

1)安装hexo-admin插件npm install --save hexo-admin
2) 启动访问hexo s
http://127.0.0.1:4000/admin

2.17Hexo添加博客导航页

1)新建页面,执行下面的命令

hexo new page navigate  

2)修改 navigate 目录下的 index.md 的格式

---
title: 个人常用网站
date:  2020-10-09 11:19:14  
type: "navigate"
layout: "navigate"   
---  

3)在主题配置文件_config.yml中添加个人常用网站

  导航:
    url: /navigate
    icon: fas fa-location-arrow  

4)在 matery/layout 下新建 navigate.ejs

 <div class="navi-height bg-cover pd-header "> 
    <div class=" link-box container"> 
        <!-- 搜索框 --> 
        <div class="baidu baidu-2 large-screen"> 
            <form name="f" action="https://www.baidu.com/" target="_blank"> 
                 <div id="Select-2"> 
                     <div class="Select-box-2" id="baidu"> 
                         <ul style="height: 46px;"> 
                            <li class="this_s">百 · 度</li> 
                            <li class="bing_s">必 · 应</li> 
                            <li class="google_s">谷 · 歌</li> 
                            <li class="baidu_s">百 · 度</li> 
                         </ul> 
                     </div> <input name="wd" id="kw-2" maxlength="100" autocomplete="off" type="text"> 
                 </div> 
                 <div class="qingkong" id="qingkong" title="清 · 空" style="display: none;">x</div> <input value="搜 · 索" 
                     id="su-2" type="submit"> 
                 <ul class="keylist"></ul> 
             </form> 
         </div> <!-- 链接 -->
         <div class="row tags-posts "> 
             <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
                 <div class="card"> 
                     <div class="jj-list-tit">娱乐 · 影视</div> 
                     <ul class="jj-list-con">  
                         <li><a href="https:pixiv.net" class="link-3" target="_blank">Pixiv</a></li>  
                         <li><a href="https://www.bilibili.com/" class="link-3" target="_blank">哔哩哔哩</a></li> 
                         <li><a href="https://www.acfun.cn/" class="link-3" target="_blank">ACfun</a></li> 
                         <li><a href="https://www.spotify.com/" class="link-3" target="_blank">Spotify</a></li> 
                         <li><a href="https://awbw.amarriner.com/" class="link-3" target="_blank">AWBW</a></li> 
                         <li><a href=" https://music.163.com/" class="link-3" target="_blank">网易云音乐</a></li>
                     </ul> 
                 </div> 
             </div> 
             <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
                 <div class="card"> 
                     <div class="jj-list-tit">社区 · Code</div> 
                     <ul class="jj-list-con"> 
                         <li><a href="https://github.com/" class="link-3" target="_blank">GitHub</a></li> 
                         <li><a href="https://coding.net/" class="link-3" target="_blank">Coding</a></li> 
                         <li><a href="https://juejin.im/" class="link-3" target="_blank">掘金</a></li> 
                         <li><a href="https://gitee.com/" class="link-3" target="_blank">码云</a></li> 
                         <li><a href="https://www.v2ex.com/" class="link-3" target="_blank">V2EX</a></li> 
                         <li><a href="https://www.jianshu.com/" class="link-3" target="_blank">简书</a></li> 
                         <li><a href="https://www.52pojie.cn/" class="link-3" target="_blank">吾爱破解</a></li> 
                         <li><a href="https://segmentfault.com/" class="link-3" target="_blank">思否</a></li> 
                         <li><a href="https://cloud.tencent.com/developer/" class="link-3" target="_blank">云+社区</a></li> 
                     </ul> 
                 </div> 
             </div> 
             <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
                 <div class="card"> 
                     <div class="jj-list-tit">图片处理</div> 
                     <ul class="jj-list-con"> 
                         <li><a href="https://tinypng.com/" class="link-3" target="_blank">TingPNG</a></li> 
                         <li><a href="https://www.upyun.com/webp" class="link-3" target="_blank">又拍云Webp</a></li> 
                         <li><a href="https://www.iconfont.cn/" class="link-3" target="_blank">IconFont</a></li> <li><a href="https://fontawesome.com/" class="link-3" target="_blank">AweSome</a></li> 
                         <li><a href="https://wallhaven.cc/" class="link-3" target="_blank">超清壁纸</a></li> 
                     </ul> 
                 </div> 
             </div> 
             <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
                 <div class="card"> <div class="jj-list-tit">实用 · 工具</div> 
                 <ul class="jj-list-con"> 
                     <li><a href="https://mdnice.com/" class="link-3" target="_blank">Nice编辑器</a></li> 
                     <li><a href="https://www.processon.com/" class="link-3" target="_blank">思维导图</a></li> 
                     <li><a href="https://cli.im/" class="link-3" target="_blank">二维码</a></li> 
                     <li><a href="https://my.openwrite.cn/" class="link-3" target="_blank">OW分发</a></li>  
                     <li><a href="https://www.guidgen.com/" class="link-3" target="_blank">GUID在线生成</a></li> 
                     <li><a href="https://console.upyun.com/purge/purge_url/" class="link-3" target="_blank">又拍云刷新网站</a></li> 


                 </ul> 
             </div> 
         </div> 
         <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
             <div class="card"> 
                 <div class="jj-list-tit">编程 · 学习</div> 
                 <ul class="jj-list-con"> 
                     <li><a href="https://www.oschina.net/" class="link-3" target="_blank">开源中国</a></li> 
                     <li><a href="https://htmldog.com/" class="link-3" target="_blank">HTML狗</a></li> 
                     <li><a href="https://www.icourse163.org/" class="link-3" target="_blank">中国大学慕课</a></li> 
                     <li><a href="https://www.imooc.com/" class="link-3" target="_blank">慕课网</a></li> 
                     <li><a href="http://www.wxapp-union.com/" class="link-3" target="_blank">小程序</a></li> 
                     <li><a href="https://blog.51cto.com/" class="link-3" target="_blank">51CTO</a></li> 
                     <li><a href="https://www.shiyanlou.com/library/" class="link-3" target="_blank">实验楼</a></li> 
                     <li><a href="https://spring.io/" class="link-3" target="_blank">Spring</a></li> 
                     <li><a href="https://blog.csdn.net/" class="link-3" target="_blank">csdn</a></li>
                 </ul> 
             </div> 
         </div> 
         <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
             <div class="card"> 
                  <div class="jj-list-tit">资讯 · 趋势</div> 
                  <ul class="jj-list-con"> 
                      <li><a href="https://www.huxiu.com/" class="link-3" target="_blank">虎嗅</a></li> 
                      <li><a href="https://insights.stackoverflow.com/" class="link-3" target="_blank">技术调查</a></li> 
                      <li><a href="http://www.asciiworld.com/" class="link-3" target="_blank">摸鱼</a></li> 
                      <li><a href="https://sspai.com/" class="link-3" target="_blank">少数派</a></li> 
                      <li><a href="https://zh.wikihow.com/" class="link-3" target="_blank">WikeHom</a></li> 
                      <li><a href="https://www.awesomes.cn/rank?sort=hot" class="link-3" target="_blank">前端趋势</a></li> 
                      <li><a href="https://github-trending.com/" class="link-3" target="_blank">GitHub趋势</a></li> <li><a href="https://www.tiobe.com/" class="link-3" target="_blank">编程趋势</a></li> 
                      <li><a href="https://trends.google.com/" class="link-3" target="_blank">Google趋势</a></li> 
                  </ul> 
              </div> 
          </div> 
          <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up"> 
              <div class="card"> 
                  <div class="jj-list-tit">常用· 其他</div> 
                  <ul class="jj-list-con">   
                      <li><a href="https://www.qvdv.com/tools/qvdv-guid.html" class="link-3" target="_blank">在线工具</a> 
                      <li><a href="http://zhongguose.com/" class="link-3" target="_blank">中国色</a></li> 
                      <li><a href="https://opensource.builders/" class="link-3" target="_blank">OpenSource</a></li> 
                      <li><a href="https://cloud.tencent.com/" class="link-3" target="_blank">腾讯云</a></li>
                      <li><a href="https://www.leancloud.cn/" class="link-3" target="_blank">leancloud</a></li>
                      <li><a href="http://127.0.0.1:4000/admin/" class="link-3" target="_blank">管理</a></li>
                      <li><a href="https://www.natfrp.com/user/" class="link-3" target="_blank">Sakura</a></li>
                  </ul> 
              </div> 
          </div> 
      </div> 
      <script> /*选择搜索引擎*/ $('.Select-box ul').hover(function () { $(this).css('height', 'auto') }, function () { $(this).css('height', '40px') }); $('.Select-box-2 ul').hover(function () { $(this).css('height', 'auto') }, function () { $(this).css('height', '46px') }); $('.Select-box li').click(function () { var _tihs = $(this).attr('class'); var _html = $(this).html(); if (_tihs == 'baidu_s') { _tihs = 'https://www.baidu.com/s'; _name = 'wd'; } if (_tihs == 'google_s') { _tihs = 'https://www.google.com/search'; _name = 'q'; } if (_tihs == 'bing_s') { _tihs = 'https://www.bing.com/search'; _name = 'q'; } $('.baidu form').attr('action', _tihs); $('.this_s').html(_html); $('#kw').attr('name', _name); $('.Select-box ul').css('height', '40px') }); $('.Select-box-2 li').click(function () { var _tihs = $(this).attr('class'); var _html = $(this).html(); if (_tihs == 'baidu_s') { _tihs = 'https://www.baidu.com/s'; _name = 'wd'; } if (_tihs == 'google_s') { _tihs = 'https://www.google.com/search'; _name = 'q'; } if (_tihs == 'bing_s') { _tihs = 'https://www.bing.com/search'; _name = 'q'; } $('.baidu form').attr('action', _tihs); $('.this_s').html(_html); $('#kw-2').attr('name', _name); $('.Select-box-2 ul').css('height', '48px') }); //清空输入框内容 $('.qingkong').click(function () { cls(); $(this).css('display', 'none') }); function cls() { var sum = 0; var t = document.getElementsByTagName("INPUT"); for (var i = 0; i < t.length; i++) { if (t[i].type == 'text') { ++sum; t[i].value = "";//清空 } } } //清空输入框按钮的显示和隐藏 function if_btn() { var btn_obj = document.getElementById("kw") || document.getElementById("kw-2"); var cls_btn = document.getElementById("qingkong"); var btn_obj_val; var times; //当元素获得焦点时 if (btn_obj == '' || btn_obj == null) { return false; //如果没有找到这个元素,则将函数返回,不继续执行 } btn_obj.onfocus = function () { times = setInterval(function () { btn_obj_val = btn_obj.value; if (btn_obj_val != 0) { cls_btn.style.display = "block"; } else { cls_btn.style.display = "none"; } }, 200); } //元素失去焦点时 btn_obj.onblur = function () { clearInterval(times); } } </script> 
  </div> 
</div> 
<style> 
    * { 
        margin: 0; 
        padding: 0; 
        font-family: "微软雅黑" 
    } 
    ul,li,h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd { 
        margin: 0px; 
        padding: 0px; 
        font-size: 14px; 
        font-weight: normal; 
    } 

    img { 
        border-style: none; 
    }     

    li { 
        list-style: none; 
        float: left 
    }     

    a { 
        text-decoration: none 
    } 

    .card { 
       background-color: rgba(25, 240, 229, 0); 
       width: 96%; 
       margin-left: 2% 
     } 

     .baidu { 
         float: left; 
         margin-left: 100px; 
    } 

    .baidu form { 
        position: relative 
    } 

    .Select-box ul { 
        height: 40px; 
        position: absolute; 
        left: -1px; 
        top: 0px; 
        z-index: 9999; 
        background: #FFF; 
        border: 1px solid #ccc; 
        border-top: none; 
        overflow: hidden 
    } 

    .Select-box li { 
        width: 60px; 
        line-height: 40px; 
        font-size: 14px; 
        color: #484848; 
        border: 0; 
        cursor: 
        pointer; 
    } 

    .Select-box li:hover { 
        background: #3385ff; 
        color: #FFF; 
    } 

    .Select-box .this_s { 
        color: #317ef3; 
    } 

    .Select-box .this_s:hover { 
        background: #FFF; 
        color: #317ef3;    
    } 

    .qingkong { 
        position: absolute; 
        right: 120px; 
        top: 12px; 
        width: 18px; 
        height: 18px;
        background: rgba(0, 0, 0, 0.1); 
        border-radius: 18px; 
        line-height: 16px; 
        color: #666666; 
        cursor: pointer; 
        text-align: center; 
        font-size: 14px; 
        display: none; 
    } 

    .qingkong:hover {
        background: rgba(0, 0, 0, 0.2); 
    } 

    .qingkong:active { 
        background: rgba(0, 0, 0, 0.3);        
    } 

    .baidu-2 { 
        width: 100%; 
        height: 110px; 
        margin: 0 auto; 
        background: none; 
        padding-top: 50px; 
    } 

    .baidu-2 form { 
        width: 520px; 
        margin: 0 auto; 
    } 

    .baidu-2 input { 
        padding: 13px 8px; 
        opacity: 0.9; 
        font-size: 15px; 
    } 

    #Select-2 { 
        float: left; 
    } 

    .Select-box-2 { 
        text-align: center; 
        float: left; 
        position: relative; 
    } 

    .Select-box-2 ul { 
        height: 46px; 
        position: absolute; 
        left: 0px; 
        top: 1px; 
        z-index: 9999; 
        background: rgba(255, 255, 255, 0.9); 
        border: 1px solid #ccc; border-top: none; 
        overflow: hidden 
    } 

    .Select-box-2 li { 
        width: 60px; 
        line-height: 46px; 
        font-size: 15px; 
        color: #484848; 
        border: 0; 
        cursor: pointer; 
    } 

    .Select-box-2 li:hover { 
        background: #3385ff; 
        color: #FFF; 
    } 

    .Select-box-2 .this_s { 
        color: #317ef3; 
    } 

    .Select-box-2 .this_s:hover { 
        background: none; 
        color: #317ef3; 
    } 

    #kw-2 { 
        width: 335px; 
        outline: 0; 
        border: 1px solid #ccc; 
        background: rgba(255, 255, 255, 0.2); 
        color: #000000; 
        padding-left: 70px; 
        font-weight: bold; 
    } 

    /*修改搜索框样式*/ 
    #su-2 { 
        width: 90px; 
        background: blue; 
        border: none; 
        border-top: #3385ff 1px solid; 
        border-bottom: 1px solid #2d78f4; 
        color: #FFF; 
        cursor: pointer;
        /*去轮廓阴影*/ 
        outline: none; 
    } 

    /*光标移动到搜索框颜色*/ 
    #su-2:hover { 
        background: blue; 
        border-bottom: 1px 
        solid blue; 
    } 

    #su-2:active { 
        background: blue; 
        box-shadow: inset 1px 1px 3px blue; 
        -webkit-box-shadow: inset 1px 1px 3px blue; 
    } 

    .jj-list-tit { 
        font-size: 16px; 
        line-height: 25px; 
        color: #ffffff; 
        width: 100%; 
        padding-left: 38.5%; 
    } 

    .jj-list-con { 
        overflow: hidden; 
        margin: 0 auto 
    } 

    /*控制网站列表间距*/ 
    .jj-list-con li { 
        width: 31.333%; 
        margin: 1%; 
    } 

    .link-3 { 
        display: block; 
        background: rgba(0, 0, 0, .35); 
        color: #FFF; 
        font-size: 13px; 
        text-align: center; 
        line-height: 35px; 
        padding: 4px 0; 
        border-radius: 2px; 
        transition: all 0.2s 
    } 


    .link-3:hover { 
        background: rgba(0, 0, 0, .45); 
        font-size: 15px; 
        font-weight: bold 
    } 

    /*1栏 小于584*/ 
    @media only screen and (max-width: 584px) { 
        .navi-height { 
            height: 1300px; 
        } 

        .link-box { 
            margin-top: 5%; 
        } 

        .large-screen { 
            display: none; 
        } 
    } 

    /* 2栏 大于584 小于993px */ 
    @media only screen and (min-width: 584px) and (max-width: 993px) { 
        .navi-height { 
            height: 800px; 
        } 

        .link-box { 
            margin-top: 5%; 
        } 

        .large-screen { 
            display: none; 
        } 
    } 

    /*3栏 大于993px*/ 
    @media only screen and (min-width: 993px) { 
        .navi-height { 
            position: absolute; 
            width: 100%; 
            height: 100%; 
        } 
    } 

    /* 隐藏footer */ 
    .page-footer { 
        display: none; 
    } 
</style> 
<% if (theme.banner.enable) { %> 
<script> 
    // 每天切换 banner 图. Switch banner image every day. 
    var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.jpg'; $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')'); 
    </script> 
    <% } else { %> 
    <script> 
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)'); 
</script> 
<% } %>

2.18 Hexo 博客订阅文章通知功能

进入站点根目录

npm install hexo-web-push-notification --save 

编辑站点配置文件_config.yml

webPushNotification:
  webpushrKey: "your webpushr rest api key"
  webpushrAuthToken: "your webpushr authorize token"
  trackingCode: "AEGlpbdgvBCWXqXI6PtsUzobY7TLV9gwJU8bzMktrwfrSERg_xnLVbjpCw8x2GmFmi1ZcLTz0ni6OnX5MAwoM88"

[注册账号]https://app.webpushr.com/signup

按照步骤操作
将第二步中所指的代码复制粘贴到你的 layout.ejs文件内,执行hexo clean&&hexo g&&hexo d部署即可!

部署之后可能会遇到无法正常发送通知的情况.

进入目录 node_modules/hexo-web-push-notification/index.js文件中第22行'summary': util.stripHTML(newPost.excerpt),这里取值取的是excerpt,改成summary即可。

修改前

json
var JSONFeed = {
        'title': newPost.title,
        'id': newPost.path,
        'date_published': newPost.date.format('L'),
        'summary': util.stripHTML(newPost.excerpt),
        'url': newPost.permalink,
        'tags': newPost.tags.data.map(function (v) { return v.name }),
        'categories': newPost.categories.data.map(function (v) { return v.name })
    }

修改后

json
var JSONFeed = {
        'title': newPost.title,
        'id': newPost.path,
        'date_published': newPost.date.format('L'),
        'summary': util.stripHTML(newPost.summary),
        'url': newPost.permalink,
        'tags': newPost.tags.data.map(function (v) { return v.name }),
        'categories': newPost.categories.data.map(function (v) { return v.name })
    }

将hexo部署到服务器

系统centos 7.6 64bit

环境 git nginx

git安装与配置

1. 安装依赖库和编译工具

  yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel 
 Is this ok [y/d/N]:  

输入y继续安装,后面一样

2. 安装编译工具:

  yum install gcc perl-ExtUtils-MakeMaker package 

下载 git并解压编译安装

1. 查看服务器已有的git版本

git --version
git version 1.8.3.1

2. 将陈旧版本的git删除

yum remove git 

3.选择一个目录来存放下载下来的 git 安装包。这里选择了/usr/local/src 目录

cd /usr/local/src   

4. 下载最新版git到/usr/local/src,可以在官网找到版本,目前最新版本是2.26.0。

wget http://ftp.ntu.edu.tw/software/scm/git/git-2.26.0.tar.gz  

5. 解压到当前目录

tar -zvxf git-2.26.0.tar.gz  

6. 进入 git-2.26.0.tar.gz 目录下

cd git-2.26.0

7. 执行编译

make prefix=/usr/local/git all  

8.安装 git 到 /usr/local/git 目录下

make prefix=/usr/local/git install  

配置 git 环境变量

1.打开环境变量配置文件

vim /etc/profile  

按i进入编辑模式,按向下键到底部,添加下面两行命令:

PATH=$PATH:/usr/local/git/bin   # git 的目录
export PATH  

按esc退出,按:wq保存编辑。(注意是先:再是wq)

2.使 git 环境变量生效

 source /etc/profile

3.验证安装完成,查看 git 的版本号

git --version

这时候我们的git版本已经变成了:

git version 2.26.0
1

创建 git 用户

1.创建git用户

adduser git

2.获取权限

chmod 740 /etc/sudoers
vim /etc/sudoers

按 i 键进入文件的编辑模式,按向下键找到如下字段

root    ALL=(ALL)       ALL

在其后面增加一句:

git     ALL=(ALL)       ALL

按 Esc 键退出编辑模式,输入:wq 保存退出。(先输入:,然后输入wq回车)

3.退回权限

chmod 400 /etc/sudoers  

配置密钥

1.将密钥保存在服务器(之前有密钥的直接复制就可以)

将id_rsa.pub里面的密钥复制,在服务器运行下面命令,创建.ssh文件夹

su git
mkdir ~/.ssh

创建.ssh/authorized_keys文件,打开authorized_keys文件并将刚才在本地机器复制的内容拷贝其中并保存

vim ~/.ssh/authorized_keys

按i进入编辑模式粘贴完按 Esc 键退出编辑模式,输入:wq 保存退出。(先输入:,然后输入wq回车)

2.修改权限

chmod 755 ~
chmod 700 ~/.ssh
chmod 600 ~/.ssh/authorized_keys

3.测试本地连接服务器

在本地电脑git bash here

//yourIp为远程服务器的ip地址
ssh -v git@yourIp  
git@vm_0_centos~

创建git仓库

1.切换到root用户,创建一个目录用于存储网站的根目录

su root

2.创建网站的根目录

mkdir /home/hexo

3给予权限

chown git:git -R /home/hexo

安装Nginx

1.安装配置Nginx

安装Nginx

yum install -y nginx

配置Nginx

nginx -t

使用vim打开nginx.conf文件

vim /etc/nginx/nginx.conf

按i进入编辑模式粘贴完按 Esc 键退出编辑模式,输入:wq 保存退出。(先输入:,然后输入wq回车)

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  www.muyiio.com;   //你的博客域名
        root         /home/hexo;       //git仓库目录
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
    }
j
    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

2.启动Nginx

systemctl start nginx.service

3.重启Nginx

systemctl restart nginx.service

自动化部署

1.获取root权限

su root

2.建立git仓库

cd /home/git
git init --bare blog.git

3.修改blog.gi权限

chown git:git -R blog.git

4.在 /home/hexo/blog.git 下,有一个自动生成的 hooks 文件夹,我们创建一个新的 git 钩子 post-receive,用于自动部署。

im blog.git/hooks/post-receive

按 i 键进入文件的编辑模式,在该文件中添加两行代码(将下边的代码粘贴进去),指定 Git 的工作树(源代码)和 Git 目录

git --work-tree=/home/hexo --git-dir=/home/git/blog.git checkout -f 

按 Esc 键退出编辑模式,输入:wq 保存退出。(先输入:,然后输入wq回车)

5.修改文件权限,使得其可执行。

chmod +x /home/git/blog.git/hooks/post-receive  

配置本地Hexo

1.博客根目录_config下增加

deploy:
    type: git
    repo: root@***(服务器ip,内网外网都行):/home/git/blog.git    #仓库地址
    branch: master    #分支

2.部署

hexo clean
hexo g
hexo d

输入hexo d的时候,会要求你输入自己的服务器密码

Branch 'master' set up to track remote branch 'master' from 'https://e.coding.net/godxiaolon/godxiaolon.git'.
On branch master
nothing to commit, working tree clean
root@119.25.56.82's password:
Enumerating objects: 182, done.
Counting objects: 100% (182/182), done.
Delta compression using up to 12 threads
Compressing objects: 100% (61/61), done.
Writing objects: 100% (95/95), 73.08 KiB | 3.18 MiB/s, done.
Total 95 (delta 45), reused 0 (delta 0)
remote: hooks/post-receive: line 1: t: command not found
To 118.25.27.52:/home/git/hexoBlog.git
   8df3691..7d63b39  HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'root@118.25.27.52:/home/git/hexoBlog.git'.
INFO  Deploy done: git

输入密码不会有显示,输完回车就可以

3.如果出现bash: git-receive-pack: command not found,则运行:

sudo ln -s /usr/local/git/bin/git-receive-pack  /usr/bin/git-receive-pack

4.访问服务器ip,看看有没有成功

hexo seo cdn 其他优化

hexo seo

1.百度收录

[登录百度站长平台:]http://zhanzhang.baidu.com

只要有百度旗下的账号就可以登录,登录成功之后在站点管理中点击添加网站然后输入你的站点地址,建议输入的网站为www开头的,不要输入github.io的,因为github是不允许百度的spider爬取github上的内容的,所以如果想让你的站点被百度收录,只能使用自己购买的域名,使用文件验证下载验证保存好,粘贴到 public文件夹中,每次执行过hexo cl后要重新复制粘贴不能存放到source中自动上传因为上传过程中会被编译改变了文件导致验证失败。
生成网站地图
优解用markdown打开从百度下载的html文件,然后把这三句话放在百度给的识别码之前:

--- 
layout: false
---
识别码

我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎

安装sitemap插件

npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save

修改博客配置文件

在根目录配置文件中修改url为你的站点地址

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://cherryblog.site
root: /
permalink: :title.html
permalink_defaults:

执行完之后就会在网站根目录生成sitemap.xml文件和baidusitemap.xml文件,可以通过http://www.cherryblog.site/baidusitemap.xml,查看该文件是否生成,其中sitemap.xml文件是搜索引擎通用的文件,baidusitemap.xml是百度专用的sitemap文件。

向百度提交链接
然后我们就可以将我们生成的sitemap文件提交给百度,还是在百度站长平台,找到链接提交,这里我们可以看到有两种提交方式,自动提交和手动提交,自动提交又分为主动推送、自动推送和sitemap

设置主动推送

安装插件hexo-baidu-url-submit

npm install hexo-baidu-url-submit --save

然后再根目录的配置文件中新增字段

baidu_url_submit:
  count: 80             # 提交最新的一个链接
  host: www.sunhwee.com # 在百度站长平台中注册的域名
  token: xxxxxxxxxxxxxx # 请注意这是您的秘钥, 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt  # 文本文档的地址, 新链接会保存在此文本文档里

再加入新的deploy:

deploy:
- type: baidu_url_submitter  

2.google收录

与百度同样操作

3.其他seo优化

seo优化应该说是一个收益延迟的行为,可能你做的优化短期内看不到什么效果,但是一定要坚持,seo优化也是有很深的可以研究的东西,从我们最初的网站设计,和最基础的标签的选择都有很大的关系,网站设计就如我们刚刚说的,要让用户点击三次可以到达网站的任何一个页面,要增加高质量的外链,增加相关推荐(比如说我们经常见到右侧本站的最高阅读的排名列表),然后就是给每一个页面加上keyword和描述
在代码中,我们应该写出能让浏览器识别的语义化HTML,这样有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;并且对外链设置nofollow标签,避免spider爬着爬着就爬出去了(减少网站的跳出率),并且我们要尽量在一些比较大的网站增加我们站点的曝光率,因为spider会经常访问大站,比如我们在掘金等技术社区发表文章中带有我们的站点,这样spider是很有可能爬到我们中的站点的,so….


文章作者: 不染轻裳
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 不染轻裳 !
评论
 上一篇

阅读全文

hexo部署到本地
hexo部署到本地 hexo部署到本地
hexo部署到本地本地nodejs,淘宝云镜像,git环境搭建1.nodejs搭建教程:1.1下载: 下载地址:https://nodejs.org/en/download/ 一般的Windows系统都选择.msi 64位安装。(.ms
2020-10-24
下一篇 

阅读全文

markdown
markdown markdown
本文目的:熟悉学习markdown语法为后续书写文章做准备 一通用语法1.标题用文字前#的数量来表示几级标题如: 一级标题二级标题三级标题2.无序列表无序列表的使用,在减号-后加空格使用如下: 无序列表1 无序列表2 无序
2020-10-22
  目录