zl程序教程

您现在的位置是:首页 >  Java

当前栏目

不花一分钱,零门槛10分钟搭建自己的线上博客平台平台

2023-02-18 16:43:14 时间

清水河

博客主要是关于自己搭建的过程,遇到的坑的一些总结,给小伙伴提供一些避坑经验。同时上传了自己的代码,可以直接拉去我的快速搭建。

写在前面


之前一直在CSDN上写博文,一次改粉丝可见性,有一篇整理了三年的博文CSDN吃了>_<|||,就给我留了几个字。

那天晚上伤心了好久,觉也没睡,费了好多时间,还是上学时就开始写的,也有一些小伙伴收藏,所以吸取教训,想自己搞一个备份。自己搭一个博客系统,在Github上托管,后期会放到Gitee上,现在Gitee上的Gitee Page功能不支持。Github上大多时候是访问不到的。

本篇博文主要是关于自己搭建的过程,遇到的坑的一些总结,给小伙伴提供一些避坑经验。同时上传了自己的代码,可以直接拉去我的快速搭建。

笔记由两部分内容构成: 博客展示具体的搭建教程。不足之处请小伙伴留言。


?? 博客搭建思路:基于hexo+Amazing 来实现,本地写好 markdown 之后,在本地将 markdown 渲染成 HTML,然后将渲染好的 HTML 上传到服务端(Github )。所以不需要数据库生产部署不需要环境,很方便。在本地搭建的时候需要Node.jsGit环境。

?? 关于 hexo:Hexo是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。建议小伙伴移步官网了解下:https://hexo.io/zh-cn/docs/

?? 关于Amazing主题:是一个基于主题icarus基础之上的一个主题,个人比较喜欢。了解更多请移步 https://github.com/removeif/hexo-theme-amazing

?? 如果小伙伴想自己学着搭建,建议小伙伴直接按照官网教程来搞,很easy,这里分享一些避坑经验

  • 本地的搭好的博客系统代码,不要和渲染的HTML放到一个Github库里,不然本地的搭建代码会被屏蔽掉。本地的代码如果没有其他用,可以不上传Github仓库。
  • 关于Amazing主题中,评论模块碎碎念issue需要申请Gitub客户端授权,这里可以参考使用说明系列(部署中有问题此issue讨论):https://github.com/removeif/hexo-theme-amazing/issues/16
  • 推荐一篇关于博客搭建的博客不用花一分线,松哥手把手教你上线个人博客

?? 如果小伙伴想方便一点,也可以直接拉我的代码,按照下面的部署方式就可以了。

?? 关于搭建好博客系统如何写文章,其实特别方便,需要指定文件夹新建一个markdown文件,内容如下:

title: 标题
top: 1
toc: 是否显示目录
recommend: 文章推荐权值 
keywords: 关键字
date: 2019-09-19 22:10:43  日期
thumbnail:   https://cdn.jsdelivr.net/gh/removeif/blog_image/img/2019/20190919221611.png  封面图片
tags: 工具教程 标签
categories: [工具教程,主题工具] 分类

博文摘要
<!-- more -->
博文正文

之前就啥都不用管了,一且OK了.

嘻嘻,先展示一下我的成果,然后我们谈谈如何搭建


博客展示

我的博客地址:https://liruilongs.github.io/

博客代码:https://gitee.com/liruilonger/blog

???? PC端????

首页

归档

博客阅读


???? 平板????

首页

博客阅读(主题跟换)


留言墙

???? 手机端????

具体的搭建教程

默认小伙伴已经安装了Node.jsGit环境。并且Node版本满足要求,Git配置了SSH免密

具体的环境要求参考官网:https://hexo.io/docs/

??下面我们愉快的开始吧??


? Git Bash 执行:

$ git clone git@gitee.com:liruilonger/blog.git

? 在blog目录下进入cmd执行

npm install

? 在themes目录同样执行

cd ./themes
npm install

? 如果以上出现问题,可以按照错误提示或百度,自行解决。

???? 做到这一部我们的博客框架就已经搭建完成啦 ????

? 下面就是生成静态文件

hexo g

? 启动服务器。默认情况下,访问网址为:http://localhost:4000/

hexo s

控制台打印:

D:\code\blogger\blogger\themes>hexo s
INFO  Validating config
Inferno is in development mode.
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
INFO  Good bye

? ? 之后我们就可以在本地访问啦。? ?

部署:结合Github Page 发布静态html

小伙伴可以参考官方文档https://hexo.io/zh-cn/docs/one-command-deployment,我们这里也是采用这种方式部署。

默认小伙伴已经有个Github 账户,并且已经申请Github 客户端的ID密匙,关于Github 客户端的授权申请(可以在这里找一下)

这里需要修改发布的Github 库为自己的库:https://gitee.com/liruilonger/blog/blob/master/_config.yml#L104,并且这个库已开通Github Page。关于Github Page请自行百度。

deploy:
  type: git
  repo: git@github.com:LIRUILONGS/LIRUILONGS.github.io.git # 自己的库URL
  branch: master #部署的分支

? ? 之后我们就可以使用命令部署了,部署完成之后就可以根据Github Page访问啦? ?

hexo d

OK这样我们就完成了简单部署,

日常写作中,我们可以在写完博客之后,编译,然后发布,就会直接推送到我们的Github Page的库里面。

hexo g
hexo d
D:\code\blogger\blogger\themes>hexo g
INFO  Validating config
Inferno is in development mode.
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Start processing
INFO  Files loaded in 2.45 s
INFO  Generated: album/index.html
INFO  Generated: media/index.html
INFO  Generated: about/index.html
INFO  Generated: message/index.html
INFO  Generated: content.json
INFO  5 files generated in 3.07 s

D:\code\blogger\blogger\themes>hexo d
INFO  Validating config
Inferno is in development mode.
Inferno is in development mode.
INFO  =======================================
 ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
 ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
 ██║██║     ███████║██████╔╝██║   ██║███████╗
 ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
 ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
 ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO  === Checking package dependencies ===
INFO  === Checking theme configurations ===
INFO  === Registering Hexo extensions ===
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
warning: LF will be replaced by CRLF in 20

关于Amazing主题中评论留言功能的Github相关修改,请小伙伴参考Amazing主题作者的README.md 有问题的小伙伴欢迎交流。


我的博客地址:https://liruilongs.github.io/