搭建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 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个人博客爬坑之一相关推荐
- 从零开始使用GitHub Pages搭建Hexo静态博客
本文主要讲述如何使用GitHub Pages/Coding/Vercel搭建Hexo静态博客,以及如何使用jsDelivr加速静态资源.如何使用LeanCloud国际版搭载博客评论,和如何使用PicG ...
- 在 Coding 上搭建 Hexo 个人博客!
前言 最近闲来没事干,想搭建一个自己的博客来玩玩,但是又不想出钱买域名和租服务器.正好最近很流行搭建一个静态博客(本人用的是 hexo),而且部署上 github.coding.GitGafe上面也很 ...
- 搭建hexo+Github博客
摘要 本文主要向大家介绍了如何搭建hexo-Github博客的详细过程,有需要的朋友们可以尝试阅读,希望对大家有帮助. 简要吐槽 搭博客其实没那么麻烦,但是在网上各类教程的"指导下" ...
- 最简便的方法搭建Hexo+Github博客,基于Next主题
前言 如果你喜欢写作,我觉得你可以试试gitbook或者跟着本文搭建一个属于自己的博客空间(即使你不是IT行业的一员),不再受限于第三方博客地址,当然Hexo搭建的博客也是基于github托管的,但是 ...
- 如何改typecho主题头像_如何搭建hexo个人博客
自媒体时代,每个人都有展示自己的舞台. 你是否想过搭建一个属于自己的博客,不再为各种广告和限制而头疼? 那就入坑hexo吧!保证你一时半会儿爬不出来! 先上效果图 移动端效果图如下 是不是有一种网易轻 ...
- 如何改typecho主题头像_零成本搭建hexo个人博客(二)--修改主题
hexo默认主题landscape 估计很多小伙伴在搭建部署hexo完成后,会看到上面的页面后,然后就感觉,啊?就这?这个页面也太难看了.有没有什么方法可以改一下这个页面的UI啥的,方法是有的: 第一 ...
- 2022搭建Hexo+NexT博客教程
注: 本教程的操作截图是win11的,但操作和win10没有什么区别 要能顺利搭建博客,需要你有打开谷歌的能力(懂的都懂) 安装Git 1. 下载Git 蓝奏云下载链接:https://plutolo ...
- 搭建 Hexo 个人博客和 Matery 主题的配置优化
文章目录 Hexo 的安装 安装 Git 安装 Node.js 升级 Node.js 版本 安装 Hexo 升级 Hexo 版本 初始化 Hexo 启动 Hexo 服务 Hexo 部署到 GitHub ...
- 使用 Github 空间搭建 Hexo 技术博客——Hexo NexT主题内设置可爱的动漫小人(九)
1.安装模块 hexo博客根目录选择cmd命令窗口或者git bash 输入以下代码,安装插件 npm install --save hexo-helper-live2d 各种模型展示 live2d- ...
最新文章
- mysql sample函数_Oracle SAMPLE 语法应用
- 校园表白墙-带后台源码
- 3-24Pytorch与张量变形
- 面向对象设计模式纵横谈:Prototype 原型模式(笔记记录)
- openstack cinder api对应的命令行接口
- tif格式怎么转jpg格式
- Arduino应用开发——LCD显示图片
- 18个Java开源CMS系统一览
- 12306的问题是技术难题吗
- C++构造与析构(12) - copy elision编译器优化
- NEON Intrinsics 练习题
- 如何写毕业论文(个人心得,不是保姆级)
- ios设备苹果手机 js时间字符串转时间戳后显示错误NAN
- Java中的位移操作 、
- windows安装Halide
- IDEA java编译中出现了Exception in thread “main java.lang.UnsupportedClassVersionError
- 2020职场狠人:打脸是真的,决心也是真的
- Delphi编程中资源文件的应用
- 浅析网站seo优化原则
- 【考研计算机网络】课堂笔记1 第一章 概述
热门文章
- 计算机中只能启动硬盘上安装的操作系统,开机“找不到启动设备,请在硬盘上安装操作系统,硬盘(3F0),F2 系统检测”怎么解决?...
- 【“天才”必经之路】只需一年时间,从编程小白成为同事们敬仰的编程大神
- Automatically Labeled Data Generation for Large Scale Event Extraction
- REDIS11_缓存和数据库一致性如何保证、解决方案、提供Canel解决数据一致性问题
- lightroom使用小结七 调整作品 渐变滤镜局部调整色彩
- 2015 AppStore 最新审核指南
- 2019最新后盾Thinkphp5 博客项目实战全套
- latex法文字母及特殊字母如何显示
- 《DL/T 976-2017 带电作业用工具、装置和设备预防性试验规程》中的样品名称及试验项目...
- LX3352系列精密切割机满足各种划切需求