搭建hexo个人博客爬坑之一

扯闲篇O(∩_∩)O哈哈~

​ 每个文章的原创都有他自己的辛酸历程，我也不例外。从这周一开始接触Hexo博客模板，就被这个都是静态文件的框架吸引。当初我们学java时候，还在（** 脏话~~）各种jsp，在后来随着springboot的流行开始写起了thymeleaf，当时感觉写起来太B了。18年开始正式接触MVVM框架后，感觉自己在写html简直就是太low了。

​ 上周接到腾讯云备案客户的小哥哥通知，备案的域名审核不通过，没有添加备案链接信息，限时整改。ε=(´ο｀*)))唉，茫然啊。之前自己倒是做个好几个系统，有给朋友做的，有自己练手的，大大小小好几个，都需要后台各种部署，包括redis、mysql等等。想想自己的1G2H的小小服务器，太折腾了。

​ 从两三个月之前，开始接触了spring cloud，20年12月份又接触了docker 技术，想来自己在使用中的各种坑为啥不记录下来，于是乎想到就开整，搞个博客，正好可以整改备案信息。

​ 于是乎，各种百度“博客”，一眼就相中了hexo，正好之前有过一些前端经验，就有了这篇爬坑之旅。

Day01

​ 爬了一整天是想法错误，之前没接触过博客，以为博客和后端代码一样，既然有各种大神写过docker部署，那肯定也能在服务器用docker run跑。各种百度“dpcler 搭建hexo”，找到了N个Dockerfile。结果在服务器上一build，各种跑不起来。

​ 最后想明白了，就build一个hexo的空白环境吧，于是乎：

Dockerfile

FROM NODE:12.18
RUN npm --registry=https://registry.npm.taobao.org install hexo-cli -g

cd /usr/local/src && docker build -t hexo-blog .
docker images
docker run -it -d  -p 4000:4000  -v /var/local/blog:/blog hexo-blog
docker ps -a
docker exec it hexo-blog hexo-blog /bin/bash
hexo init blog
cd /blog
npm install
hexo s

接着在浏览器访问使用公网 http://81...1:4000，果然看到了Hello world。激动啊┭┮﹏┭┮

如果有朋友想使用docker跑hexo的服务，我建议就和我的一样初始化个npm和hexo就行。当然很多大神都写了很多类似：

FROM node:latest
MAINTAINER XueAohui xueaohui_com@163.com
ENV REFRESHED_AT 2017-03-26
VOLUME ["/opt/website"]
RUN npm install -g hexo
RUN hexo init /opt/website
WORKDIR /opt/website
EXPOSE 4000

针对类似上面的配置，有坑的的地方：

• FROM node:latest 有这句话的，大多时候18年或者在之前写的文章，有前端经验而且有强迫升级症（我有很严重的强迫症）的同学都知道，升级node 15（node的官网有bate版）会强制安装python2.7，具体作用是npm install 时如果有依赖下载有问题会使用git clone源码编译。所以这个坑就是你一旦这么写，那么在npm install 时候就会发现，各种提示python没有在环境变量。
• RUN hexo init /opt/website 类似这个语句吧，我最服气的就这个，明明我images初始化了hexo 的blog，但是进入容器就没没有这个目录。可能是我接触docker时间尚短，找不到没有hexo init blog 执行的原因。
• WORKDIR /opt/website 这个肯定是挂在外部卷轴，但是docker run 时候 -v 也增加了，但是磁盘上就是没有这个目录。

所以最简单也最好用的办法就是手动启动，这样day01终于以4000的端口启动了。

Day02

​ 一晚上的兴奋无眠，终于来到了第二天，经过2个小时的折腾（docker run nginx 、域名申请SSL）好，https//www.xuct.com.cn的访问终于OK了。写过代码的我们都知道，万事Hello World吧。

docker exec -it hexo-blog /bin/bash
apt-get update
apt-get install -y vim
cd blog
cd /sorce/_posts/
rm -fr *
cd ../..
hexo new "hello-world"
cd /sorce/_posts
vi hello-world.md
# "hello world"
cd ../..
hexo clean
hexo g
hexo s

​ 对于linux 使用半吊子的我来说上面操作无法是痛苦的，还好就是浏览器上访问域名，还真给力的出来了。但是还想在继续在hello world里写点东西，又有进入容器vi。这时我发现，根本不是这么回事，在docker容器里编辑.md文件，给自己找不痛快。

​ 如是乎：

win + R
cmder
e:
mkdir workspace_blog
cd workspace_blog
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo clean
hexo s

​ 浏览器上访问http:localhost:4000，出现了hello world。 不闲着马上hexo clean、 hexo g ，右键压缩public文件夹 ，scp -p 22 public.zip root@81…:/var/www/blog 。

​ 浏览器访问域名果然好使。下面就是各种搜索开发工具，这里写下我的工具：

• Typora md的编辑工具

• PicGo 上面工具配套的图片上传工具

• vc code 编辑配置文件

• cmder window 下cmd的替代工具

• xshell

  ​ 接着就是开始坑的环节，有了hello world，马上跟着大牛的帖子开始下载皮肤：yilia（小白，只会跟着帖子一步一步操作），下载后马上开始换肤，具体的修改一些配置各位可以自行百度。部署好后发现没有地方写《域名的备案》，搭建博客就是为了这个嘛，马上又开始找到soruce-src下，修改footer.js,添加

  <div class="BeanAn">
  	<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/img/bean.png" alt="bean.png" /><a href="">宁夏********</a>
  </div>
  
  
  

  ​ 结果部署后发现样式错乱、图片没有加载、还有个badjs报错。特别崩溃。这个时候已经下午7点多了，我的性格是不弄完不回家，马上百度继续搜“hexo yilia 增加备案“ ，各种帖子、各种答案。中间的插曲部分就不一一道了，就说最后结果把，找到了一个大神为 yilia 修改的样式：

  https://github.com/lete114/hexo-theme-yilia-pro
  

  ​ 替换部署后发现样式挺好看，接着各种搭建github图床、替换配置等等，最后部署访问，不错不错（O(∩_∩)O哈哈~）心情大好。f12一看，还是和之前报错一样，badjs 404。给作者提issues，想让大牛把badjs report部分清理掉。可能是自己太菜，大神并没有理会我，现在这个问题还在：

  https://github.com/lete114/hexo-theme-yilia-pro/issues
  

  ​ 后来不知道在哪里点开了一个帖子，说是把编译好的man.js里面关于badjs上报的清空，这真是山穷水复疑无路柳暗花明又一村，按照大神的提示搜索：listen，心凉凉。整个文档就没有这个关键词，那就按192搜索把，下面是把192的function改后结果：

  192:function(e,t,n){},193 （特意多粘贴了193,为了标识一下位置）
  

  ​ 这样，day02天以换肤、不报错的前提下完成了。

  Day 03

  ​ 今天来到了第三天（也就是今天），随便点击自己的博客，发现hello world 里面的评论写完后没有通知（按大牛主题的配置，在leancloud 中注册账号），接着搜索“valine回复” ，果然找到了valine-admin的帖子，那有了这个就开始按帖子走着。

  ​ 我用的是大神修改版，里面的邮件模板新增了，下面是链接，可以fork到自己仓库，然后下载后自行修改。

  ​

  https://github.com/jianhao2010303/Valine-Admin-Server
  

  ​ valine-admin 部署好了，大牛帖子里的唤醒leancloud的方法自己在github使发现不灵（主要是自己不会用action），于是乎：

  https://github.com/jianhao2010303/watch-leancloud
  

  ​ 自己写了个java版的定时唤醒，封装在docker里，扔到服务器开跑。如果哪位伙伴有会用现在github action 的，麻烦也告诉下。

  辛酸历程的小总结

  ​ 到现在为止，博客部署好了，评论管理也配置好了，点点还不错。点了点Lete 的博客，发现了人家的连接博客做的很酷，于是乎。。。 由于时间的关系，hexo搭建博客爬坑之二放到明天把（关于部署导航博客：nav.xuct.com.cn 、腾讯云 配置cdn、配置PigGo图床等坑）继续完成。

  ​ 好了，今天的内容就分享到这吧，休息休息两天。

  ​ 2021.01.29写于公司