搭建hexo个人博客爬坑之一

Posted 徐涛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了搭建hexo个人博客爬坑之一相关的知识,希望对你有一定的参考价值。

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

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

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

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

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

<!--more-->

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 src="/img/bean.png"/><a href="">宁夏********</a>
    </div>
    
    <style>
        .BeanAn {
            display: flex;
            text-align: center;
        }
    </style>

    ​ 结果部署后发现样式错乱、图片没有加载、还有个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搭建博客爬坑之二放到明天把(关于部署导航博客:https://nav.xuct.com.cn 、腾讯云 配置cdn、配置PigGo图床等坑)继续完成。

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

    ​ 2021.01.29写于公司

本文由博客群发一文多发等运营工具平台 OpenWrite 发布

以上是关于搭建hexo个人博客爬坑之一的主要内容,如果未能解决你的问题,请参考以下文章

Gitee + Hexo 搭建个人博客

使用Node.js+Hexo+Github搭建个人博客(续)

hexo+github个人博客搭建

基于 Hexo 从零开始搭建个人博客

hexo+github pages搭建个人博客

Hexo+Github搭建个人博客