当前位置: 首页 > news >正文

白嫖一个可以公网访问、带评论和图床的博客系统

这里我来把搭建这个网站的过程记录下,可供新手朋友搭建

完成github page的创建

首先先打开github官网,然后打开your repositories这个标签

打开仓库栏

然后新建一个repositories,名字是比较特殊的,为<username>.github.io这个格式(直接以用户名为仓库名字,是github用户首页,不错的),也就是需要自己的用户名来进行命名,如下操作

创建特殊仓库

最后配置下仓库信息如下步骤

完成仓库配置

配置hexo环境

安装nodejs

hexo是需要nodejs环境的,因此我们需要先安装nodejs,我是比较喜欢安装二进制格式的软件,然后设置环境变量,因为比较感觉,黑盒过程比较少,因此这里使用二进制安装nodejs,nodejs官方下载,二进制格式下载如下:

nodejs下载

这里我使用的是linux格式,还是linux格式适合开发环境,我是使用的wsl linux子系统,还是可以的,推荐大家使用,我们把下载的压缩包解压,这里命令如下

tar xvf node-v22.13.1-linux-x64.tar.xz

然后配置环境变量,这里我都是把后面需要添加的环境变量添加到~/.bashrc中,添加如下代码:

export PATH=$PATH://path/node-v22.13.1-linux-x64/bin

然后执行下命令source ~/.bashrc激活环境即可,执行下node -vnpm -v显示版本号,既是安装成功

mr4@DESKTOP-7BS4T8L:~$ node -v
v22.13.1
mr4@DESKTOP-7BS4T8L:~$ npm -v
10.9.2

安装hexo

国内环境的原因嗷,这里最好使用nodejs设置国内源,虽然我已经魔法上网了,但是还是建议设置国内源,具体的网上搜一下就行,我就不赘述了,下面我讲下咋配置。

首先创建一个文件夹,这里是来保存hexo环境的目录,当然后面你写的文章也会在这个目录中,这里我为这个目录命名为blog_doc,然后开始安装hexo配置环境,如下命令:

mkdir blog_doc
cd blog_doc
npm i hexo-cli -g

使用hexo -v检测hexo是否安装成功,然后就可以初始化项目了,如下命令

hexo init
npm install

经过上面的教程就算是安装完成了,这是本地的静态博客系统完成了,可以根据本博客的初始博客hello-world教程来搞了,添加文章,部署到本地的教程。

主题的切换

下面来搞一个主题,这里我以cactus来为例子,感觉这个主题比较简约,我喜欢,如下命令嗷(其他主题一样,直接找到其github主页看他的教程就行了)

cd blog_doc
git clone git@github.com:probberechts/hexo-theme-cactus.git themes/cactus

然后配置下blog_doc根目录下面的文件_config.yml,找到关键字theme,如下配置

# theme: landscape
theme: cactus

这样就可以完成主题的切换了

连接上github page

主要是对_config.yml进行配置,在文件末尾添加下面的代码

deploy:type: 'git'repository: git@github.com:nullptroot/<username>.github.io.gitbranch: master

还有一个扩展需要安装的,总是忘,那就是如下命令,主要是部署到github上的

npm i hexo-deployer-git

这样就完成了,直接按照初始博客hello-world来进行部署就行了。

扩展

图床

本来是不想用图床的,但是发现不好配置,图片路径的解析不太好搞,因此我就找了一个图床,我使用的是github作为仓库的,发现一个不错的工具,直接对接github仓库,picX,大家可以用来看看,我感觉还挺简单好用的,教程非常的简单,我就不赘述了

评论

评论功能这里是使用utterances了,本来是想用gitalk的,但是看见我使用的主题cactus集成了utterances。

首先需要在github上安装utterances,在打开的页面中选择 Only select repositories,并在下拉框中选择自己的博客仓库(比如我就是 nullptroot/nullptroot.github.io,也可以安装到其他仓库),然后点击 Install就行了。

后面就在需要在其配置文件_config.yml修改下信息就行了,搜索到utterances后,修改后面的配置信息成如下内容就行了

utterances:enabled: truerepo: <username>/<username>.github.ioissue_term: pathnamelabel: Commenttheme: github-dark

主要是enabledrepo两个字段的设置,很简单了已经。

ok了,到这里基本上都已经结束了,纯纯白嫖一个带评论和图床的博客系统,欢迎大家来我搭建好的博客评论(主页),大家快来啊。

http://www.lryc.cn/news/527031.html

相关文章:

  • 定时器、计数器
  • Ubuntu Server连接wifi
  • 关于MySQL InnoDB存储引擎的一些认识
  • 深入剖析SpringBoot启动机制:run()方法详尽解读
  • Nginx中部署多个前端项目
  • 1688寻源通:赋能跨境贸易的高效业务平台
  • JVM深入学习(一)
  • Qt Creator 15.0.0如何更换主题和字体
  • “大模型横扫千军”背后的大数据挖掘--浅谈MapReduce
  • shallowRef和shallowReactive的用法以及使用场景和ref和reactive的区别
  • maven、npm、pip、yum官方镜像修改文档
  • HTML5+SVG+CSS3实现雪中点亮的圣诞树动画效果源码
  • HTML-新浪新闻-实现标题-样式1
  • Linux-day10
  • 【Unity3D】《跳舞的线》游戏的方块单方向拉伸实现案例
  • AI智能日志分析系统
  • 试用ChatGPT开发一个大语言模型聊天App
  • Unity Epplus读取excel表并存入So文件举例
  • 连接 OpenAI 模型:基础操作
  • [ Spring ] Spring Cloud Alibaba Message Stream Binder for RocketMQ 2025
  • ubuntu 更新24LTS中断导致“系统出错且无法恢复,请联系系统管理员”
  • 力扣-链表-203 移除链表元素
  • Unity中关于实现 管道水流+瀑布流动+大肠蠕动效果笔记
  • 宏_wps_宏修改word中所有excel表格的格式_设置字体对齐格式_删除空行等
  • Linux——网络(udp)
  • Oracle-Java JDBC 连接超时之后的认知纠正
  • 自定义数据集使用框架的线性回归方法对其进行拟合
  • 15天基础内容-5
  • 82,【6】BUUCTF WEB .[CISCN2019 华东南赛区]Double Secret
  • Android WebView 中网页被劫持的原因及解决方案