最详细的博客搭建到部署教程

环境配置

在正式安装 Hexo 之前，我们需要确认电脑中是否已安装下列应用程序:

• GitHub 账号

• Node.js

  详情安装教程
  查看Node版本：node -v

• Git

  详情安装教程
  查看git版本：$ git version

  • 打开git的.ssh目录(我的是C:\Users\Administrator.ssh)，然后右键git bash如下图:
    
  • 执行如下命令：

    git config --global user.name "你的用户名"  
    git config --global user.email 你的邮箱  
    ssh-keygen -t rsa -C "你的邮箱" 
    // 记住三下回车，提示y/n就输入y 
    

  • 添加SSH key到github或者gitee: 复制密钥文件内容（路径形如C:\Users\Administrator.ssh\id_rsa.pub），粘贴到New SSH Key即可
  • 测试是否添加成功。在命令行（即Git Bash）依次输入以下命令，返回“You’ve successfully authenticated”即成功

    $ ssh -T git@github.com
    

在本地安装Hexo

全局安装Hexo，在cmd中运行以下命令：
npm install -g hexo-cli

安装淘宝镜像源：

方式一：npm install -g cnpm --registry=https://registry.npm.taobao.org
方式二：npm config set registry https://registry.npm.taobao.org
检验：npm config get registry
再安装：
npm install -g cnpm

所有必备的应用程序安装完成后，即可使用 cnpm 安装 Hexo。在blog文件下右键点击Git Bash here，输入如下命令:

常用命令

hexo g #完整命令为hexo generate,生成静态文件
hexo s #完整命令为hexo server,启动服务器,本地可以测试
hexo d #完整命令为hexo deploy,将本地编译好的静态文件发布到github上
hexo n #完整命令为hexo new,新建一篇文章
hexo clean #清除当前项目的静态文件
hexo clean && hexo g && hexo s
hexo clean && hexo douban -bgm && hexo g && hexo s #加载豆瓣插件部署博客

安装hexo

以下都是在博客根目录下操作~/blog

npm install -g hexo

初始化博客

$ hexo init

安装本地预览服务

在博客根目录 npm i hexo-server

生成和本地预览

$ hexo clean && hexo g && hexo s

查看浏览器:localhost:4000

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mXJI32F5-1584723765214)(https://ask.qcloudimg.com/http-save/yehe-4220914/tutewqpbhm.jpeg?imageView2/2/w/1620)]

部署博客到 GitHub Pages

• 创建一个repo，名称为yourname.github.io, 其中yourname是你的github名称，按照这个规则创建才有用

• npm install hexo-deployer-git --save

• 更改自己博客的_config.yml文件，找到如下代码

  deploy:
  type: git
  repo: 仓库的ssh链接
  branch: master
  

• 上传到自己建立的仓库：hexo clean && hexo g && hexo deploy
• 访问网站方式：https://yourname.github.io/
  具体可以参考

部署到gitee

基本步骤跟github的相同，但是有几个需要注意的点：
1.hexo的yml配置文件,一致

2.需要额外修改root路径，否则css这种静态资源加载不到：

• blog是你的仓库名
• url是你仓库在服务里面开通pages后的访问博客地址
  

注意

搭建好了博客，也有了hexo，但是报错:ERROR Local hexo not found in D:\hexo 解决：
1.cmd进入博客当前文件夹路径
2.执行 npm install
3.执行 hexo server
4.执行成功后,再到博客下的git中执行 hexo d /hexo g 发现可以执行成功。

部署到服务器

以下我以阿里云服务器的centos系统为例：
1.搭建git环境
xshell进入后台，安装git

yum install git

然后

git --version

查看git版本
创建一个git用户，然后按照以下代码步骤一步一步完成：

adduser git //添加git用户
passwd git // 设置git密码  
su git // 切换用户  
cd /home/git/   //进入git目录  
mkdir -p projects/blog // 创建文件来放置hexo静态工程  
mkdir repos && cd repos //创建文件放置git仓库  
git init --bare blog.git // 创建一个裸露的仓库  
cd blog.git/hooks  //进入钩子目录
vi post-receive //创建hook钩子函数(git提交时自动部署)  

hook钩子函数内容:  (注xshell命令vi/vim这两个命令的用法，输入之后按一下i字母键代表输入，输入完了之后，先按Esc键，再输入:wq代表保存退出，:q是退出不保存)
#!/bin/sh 
git --work-tree=/home/git/projects/blog --git-dir=/home/git/repos/blog.git checkout -f 

修改权限

chmod +x post-receive
exit // 退出到 root 登录
chown -R git:git /home/git/repos/blog.git // 添加权限  

2.建立ssh免密登录：
这里注意，还是git用户，不能退出，不能切换到root管理用户
创建authorized_keys文件

su git     //切换git用户
cd /home/git   //进入git目录
mkdir .ssh  //创建免密公匙目录
cd /home/git/.ssh  //注意是用git用户进这个目录，不是root
touch authorized_keys  //存放客户端的ssh公钥(id_rsa.pub)  
chmod 600 authorized_keys   //配置权限  
cd .. //退出.ssh目录  
chmod 700 .ssh  //.ssh目录必须700权限  

然后用winscap远程连接服务器，打开这个文件，注意看以下操作：
客户端本地(就是我自己的电脑)进入.ssh目录，右键git bash，同上面的操作，然后输入如下命令:
cat id_rsa.pub，复制公匙key，从ssh-rsa开始复制到最后的邮箱地址.com,如下图:

粘贴到刚刚前面winscap打开的authorized_keys里面，复制完了注意，粘贴的时候后面不能有任何的空格和回车，最后是鼠标点到最后，按del键清空下，这里就是把本地的id_rsa.pub内容复制到authorized_keys里面
测试下能否本地免密登录，首次联系会提示你输入yes，然后输入密码，如下图：

到这里免密成功，服务器git环境搭建完成，测试下能否可能服务器的目录到本地：
随便打开一个文件夹，输入以下命令：

git clone git@server_ip:/home/git/repos/blog.git 

成功以后如下：

3.限制git登录
git用户的登录权限禁掉，只能clone和push，修改目录/etc/下面的passwd文件

cat /etc/shells // 查看`git-shell`是否在登录方式里面，有则跳过
which git-shell // 查看是否安装 
vi /etc/shells
添加(which git-shell)显示出来的路劲，通常在 /usr/bin/git-shell

修改

cd /etc  
vi passwd

更改方式如下：

将原来的
git:x:1000:1000:/home/git:/bin/bash //原来的
修改为:
git:x:1000:1000:/home/git:/usr/bin/git-shell //修改后的  

4.nginx配置
这里非常重点，特别注意，容易出很多错。所以在root根目录，先执行以下几个命令，执行过程中就不会报错了:

yum update  //更新  
yum -y install pcre-devel openssl openssl-devel  
yum -y install gcc-c++  
yum install -y zlib-devel  

然后安装nginx，执行以下命令，一步一步来:

centos8系统自带nginx，所以直接yum  
yum install nginx  //安装
nginx -t  //测试安装  
systemctl enable nginx  //添加系统自启动
systemctl start nginx  //启动服务,还有stop/restart  

以上代码只要前面的环境都安装了，到这里不会报任何错误的，然后修改nginx配置文件：

cd /etc/nginx/
vi nginx.conf
修改 root 路径为: /home/git/projects/blog; 
同时将 user 改为 root 

如下图，改三个地方：

#user everyone;修改为user root; //注意去掉#字符  
server_name localhost;修改为server_name 你的域名or公网IP  
root index;修改为root /home/git/projects/blog; 

改完后记得systemctl restart nginx，就可以访问你的域名啦

npm  run  start  

5.修改hexo配置
返回本地hexo根目录，找到_system.yml，代码样式如下:

deploy:
  type: git
  repo: git@serverId:/home/git/repos/blog.git  //serverID是你的服务器地址或者git地址
  branch: master   

如果有多个仓库，repo这里填写方式一定要特别注意：

repo:
  linxu: git@serverId:/home/git/repos/blog.git //注意缩进
  github: git@your git site    //注意缩进

每个仓库都可以命名一个名称,我自己的就写的linxu,还有例如github等等，这个可以随便写，没有规定，但是要

特别注意，多个仓库并列，必须要缩进，不能和repo并齐，否则上传会出错

6.上传测试
至此，所有配置均完成，然后本地cmd写一篇文章测试下

hexo new hello

生成的hello.md文件在myblog/source/_pos下面，打开可以看到发现默认的文章title就是你新建的hello.md

的hello，这里有个小技巧，修改myblog\scaffolds下面的post.md，如下：

title: {{ title }}  //标题：注意窍门，hexo new的是你网页打开的链接显示，title可以改成中文
date: {{ date }}  //时间轴
top:   //置顶排序，数字越大越靠前
categories:   //分类
tags:   //标签

这样下次新建文章，就带有上面的这些字段了，

博客美化

两个yml文件

以下next主题为例：

• 站点配置文件，位于站点文件夹根目录内
  • ~/blog/_config.yml
• 主题配置文件，位于主题文件夹根目录内
  • ~/blog/themes/next/_config.yml

主题更换

如更换成yilia主题

• 下载主题
  • git clone https://github.com/litten/hexo-theme-yilia.git
• 配置文件 _config.yml 中指定所使用的 theme：yilia
• 安装插件
  • npm install --save-dev 插件名
• 注：可以使用cnpm替换npm，下载速度更快，安装淘宝镜像源即可。

yilia主题

1. 起初小杨是根据B站视频来搭建的，选择的yilia主题hexo + yilia主题
   但是主题里面都没有很是中意的，遂改成了Next主题，更加符合我的审美。
2. 具体的主题优化配置可以参考如下文档:
   • Hexo_yilia_主题一揽子优化方案
   • 集成码云和github评论

Next主题

###动态背景
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lvF9XnOB-1584723765215)(https://io-oi.me/images/hexo-next-optimization-2.gif)]

• 在主题配置文件中，靠后面，改 canvas_nest: true，想要更改颜色和数量？请参考
  修改文件：

  文件位置：~/blog/themes/next/source/lib/canvas-nest/canvas-nest.min.js
  ###使用腾讯云给博客添加动态相册功能
  参考小鸡，哈哈，所有的坑我都踩过一遍了，最后幸好出来了
  基于此，完善步骤如下：
  1.创建腾讯云cos存储桶
  
  2.跨域访问cors设置

• 在基础配置中找到cors设置
  
  origin源可以先填为*，然后后面成功了再改成自己的博客地址
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Dwi14kV-1584723765230)(https://blueblog-1301047842.cos.ap-chengdu.myqcloud.com/%E5%8D%9A%E5%AE%A2/cors%E4%BF%AE%E6%94%B9%E8%A7%84%E5%88%99.png)]
  3.Policy权限设置
• 存储桶访问权限：一般共有读私有写就行, 权限不配置访问存储桶域名可能会依然出现error节点
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z8BJv17j-1584723765232)(https://blueblog-1301047842.cos.ap-chengdu.myqcloud.com/%E5%8D%9A%E5%AE%A2/%E6%9D%83%E9%99%90%E8%AE%BE%E7%BD%AE.png)]
  4.本地创建相册页面

  $ hexo new page photos

  • 编辑source/photos路径下的index.md文件，写入以下代码:

  <div id="box" class="box"></div>
  
  <script type="text/javascript">
  
  function loadXMLDoc(xmlUrl) 
  {
      try //Internet Explorer
      {
          xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
      }
      catch(e)
      {
      try //Firefox, Mozilla, Opera, etc.
          {
          xmlDoc=document.implementation.createDocument("","",null);
          }
      catch(e) {alert(e.message)}
      }
      
      try 
      {
          xmlDoc.async=false;
          xmlDoc.load(xmlUrl);
      }
      catch(e) {
          try //Google Chrome  
          {  
              var chromeXml = new XMLHttpRequest();
              chromeXml.open("GET", xmlUrl, false);
              chromeXml.send(null);
              xmlDoc = chromeXml.responseXML.documentElement; 				
              //alert(xmlDoc.childNodes[0].nodeName);
              //return xmlDoc;    
          }  
          catch(e)  
          {  
              alert(e.message)  
          }  		  	
      }
      return xmlDoc; 
  }
  
  var xmllink="你的访问域名链接"
  //访问域名链接就是我上面提到的那个访问域名xml链接
  
  xmlDoc=loadXMLDoc(xmllink);
  var urls=xmlDoc.getElementsByTagName('Key');
  var date=xmlDoc.getElementsByTagName('LastModified');
  var wid=250;
  var showNum=12; //每个相册一次展示多少照片
  if ((window.innerWidth)>1200) {wid=(window.innerWidth*3)/18;}
  var box=document.getElementById('box');
  var i=0;
  
  var content=new Array();
  var tmp=0;
  var kkk=-1;
  for (var t = 0; t < urls.length ; t++) {
      var bucket=urls[t].innerHTML;
      var length=bucket.indexOf('/');
      if(length===bucket.length-1){
          kkk++;
          content[kkk]=new Array();
          content[kkk][0]={'url':bucket,'date':date[t].innerHTML.substring(0,10)};
          tmp=1;
      }
      else {
          content[kkk][tmp++]={'url':bucket.substring(length+1),'date':date[t].innerHTML.substring(0,10)};
      }
  }
  
  for (var i = 0; i < content.length; i++) {
      var conBox=document.createElement("div");
      conBox.id='conBox'+i;
      box.appendChild(conBox);
      var item=document.createElement("div");
      var title=content[i][0].url;
      item.innerHTML="<button class=title style=background:url("+xmllink+'/'+title+"封面.jpg"+");><span style=display:inline;><strong style=color:#f0f3f6; >"+title.substring(0,title.length-1)+"</strong></span></button>";
      conBox.appendChild(item);
  
      for (var j = 1; j < content[i].length && j < showNum+1; j++) {
          var con=content[i][j].url;
          var item=document.createElement("li");
          item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+content[i][j].date+"</p>";
          conBox.appendChild(item);
      }
      if(content[i].length > showNum){
          var moreItem=document.createElement("button");
          moreItem.className="btn-more-posts";
          moreItem.id="more"+i;
          moreItem.value=showNum+1;
          let cur=i;
          moreItem.onclick= function (){
              moreClick(this,cur,content[cur],content[cur][0].url);
          }
          moreItem.innerHTML="<span style=display:inline;><strong style=color:#f0f3f6;>加载更多</strong></span>";
          conBox.appendChild(moreItem);
      }
  }
  
  function moreClick(obj,cur,cont,title){
      var parent=obj.parentNode;
      parent.removeChild(obj);
      var j=obj.value;
      var begin=j;
      for ( ; j < cont.length && j < Number(showNum) + Number(begin); j++) {
          console.log( Number(showNum) + Number(begin));
          var con=cont[j].url;
          var item=document.createElement("li");
          item.innerHTML="<div class=imgbox id=imgbox style=height:"+wid+"px;><img class=imgitem src="+xmllink+'/'+title+con+" alt="+con+"></div><span>"+con.substring(0,con.length-4)+"</span><p>上传于"+cont[j].date+"</p>";
          parent.appendChild(item);
      }
      if(cont.length > j){
          obj.value=j;
          parent.appendChild(obj);
      }
  }
  
  </script>
  

  • 相册样式可以自行去调整
  • 注意：
    • 存储桶中应该必须是文件夹，不能图片和文件夹同级，否则报错：Uncaught ypeError: Cannot set property ‘0’ of undefined，

手动修改博客css样式，打造属于自己的博客样式

• F12手动查看网页
• 自己主题的themes extsourcecss_custom目录下的custom.styl文件

自定义文章底部版权声明

1. 在目录 themes/next/layout/_macro/ 下添加 my-copyright.swig ，内容如下：

   {% if page.copyright %}
   <div class="my_post_copyright">
   <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
   
   <!-- JS库 sweetalert 可修改路径 -->
   <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
   <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
   <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
   
   <p><span>本文标题:</span>{{ page.title }}</a></p>
   <p><span>文章作者:</span>{{ theme.author }}</a></p>
   <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
   <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
   <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
       <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
   </p>
   <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
   </div>
   <script> 
       var clipboard = new Clipboard('.fa-clipboard');
       clipboard.on('success', $(function(){
       $(".fa-clipboard").click(function(){
           swal({   
           title: "",   
           text: '复制成功',   
           html: false,
           timer: 500,   
           showConfirmButton: false
           });
       });
       }));  
   </script>
   {% endif %}
   

2.在目录 themes/next/source/css/_common/components/post/ 下添加 my-post-copyright.styl，内容如下:

.my_post_copyright {
    width: 85%;
    max-width: 45em;
    margin: 2.8em auto 0;
    padding: 0.5em 1.0em;
    border: 1px solid #d3d3d3;
    font-size: 0.93rem;
    line-height: 1.6em;
    word-break: break-all;
    background: rgba(255,255,255,0.4);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
    display: inline-block;
    width: 5.2em;
    color: #333333; // title color
    font-weight: bold;
    }
    .my_post_copyright .raw {
    margin-left: 1em;
    width: 5em;
    }
    .my_post_copyright a {
    color: #808080;
    border-bottom:0;
    }
    .my_post_copyright a:hover {
    color: #0593d3; // link color
    text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
    color: #000;
    }
    .my_post_copyright .post-url:hover {
    font-weight: normal;
    }
    .my_post_copyright .copy-path {
    margin-left: 1em;
    width: 1em;
    +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
    }

4.修改 themes/next/layout/_macro/post.swig ，如下：
在代码

{% if theme.wechat_subscriber.enabled and not is_index %}
    <div>
        {% include 'wechat-subscriber.swig' %}
    </div>
{% endif %}

之前，新增如下代码：

<div>
    {% if not is_index %}
        {% include 'my-copyright.swig' %}
    {% endif %}
</div>

4.打开 themes/next/source/css/_common/components/post/post.styl 文件，在最后一行增加代码:

@import "my-post-copyright"

5.设置新建文章自动开启 copyright ，即新建文章自动显示自定义的版权声明，设置 ～/scaffolds/post.md 文件，如下：

---
title: {{ title }}
date: {{ date }}
copyright: true #新增,开启
---

建立标签云及效果展示

Hexo博客建立标签云及效果展示

Hexo文章简单加密访问

教程：密码 password

参考文档：打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化
参考文档：Hexo NexT主题美化2.0
参考文档：hexo部署到个人服务器

更多内容，请点击下方：

My Blog: http://coderblue.cn/
Github:https://github.com/onecoderly
My Project:http://coderblue.cn/project/