hexo搭建一个自己的博客

news2024/10/5 21:15:26

hexo+腾讯云服务器搭建一个自己的博客
我的博客: http://www.elcarimqaq.top/

前期准备

node.js: https://nodejs.org/en/

git:https://git-scm.com/download/win

hexo官方文档:https://hexo.io/zh-cn/docs/index.html

安装hexo

npm install -g hexo-cli
# 由于我懒得添加环境变量,所以hexo命令前要加npx才能成功,npx hexo <command>,将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用 hexo <command>
npx hexo -v #验证是否安装成功

在你想要存放博客的文件夹下初始化文件夹,例如我的为 E:\workspace

npx hexo s #npm hexo init blog #初始化blog文件夹,bolg可替换为你的自定义名字
cd blog
npx install #安装必备的组件
npx hexo g #生成静态网页
npx hexo s #npm hexo s

这样本地的网站配置就弄好啦,然后浏览器打开http://localhost:4000/, 就可以看到我们的博客。

如果hexo s 启动服务后 打开localhost:4000 无响应:

管理员身份 打开命令窗口输入一下命令netstat -o -n -a | findstr :4000,发现4000端口已经有服务在使用了,通过taskkill /F /PID XXXX

结束掉占用了这个端口号的进程。

当然也可以选择换一个端口号hexo s -p 4001 ,一般就不会有端口号冲突了

常用hexo命令

npm install hexo -g #安装Hexo
npm update hexo -g #升级
hexo init #初始化博客

命令简写
hexo n "我的博客" == hexo new "我的博客" #新建文章
hexo g == hexo generate #生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy #部署

hexo server #Hexo会监视文件变动并自动更新,无须重启服务器
hexo server -s #静态模式
hexo server -p 5000 #更改端口
hexo server -i 192.168.1.1 #自定义 IP
hexo clean #清除缓存,若是网页正常情况下可以忽略这条命令

部署到GitHub

关于github在电脑上的配置这里不赘述,这里是将 Hexo 博客部署到 GitHub Pages 上。

新建一个 repository。如果你希望你的站点能通过域名 <你的 GitHub 用户名>.github.io 访问,你的 repository 应该直接命名为 <你的 GitHub 用户名>.github.io

hexo有一键部署,首先安装npm install hexo-deployer-git --save,https://github.com/hexojs/hexo-deployer-git

找到根目录下的_config.yml,找到Deployment,修改为

deploy:
  type: git
  repo: <repository url>  #https://github.com/ElcarimQAQ/elcarimqaq.github.io
  branch: [branch]
  message: [message]
npx hexo deploy

博客已经成功部署到 GitHub Pages 上面,这时候我们访问一下 GitHub Repository 同名的链接,这时候我们就可以看到跟本地一模一样的博客内容了。

这些内容实际上是博客文件夹下面的 public 文件夹下的所有内容,Hexo 把编译之后的静态页面内容上传到 GitHub 的 master 分支上面去了。

部署到云服务器

我这里使用的是腾讯云服务器

操作系统:Debian 11.1

前置:首先要在云服务器上创建一个你自己的用户,并配置好ssh

创建博客的目录,并给你的用户添加权限

su root
mkdir /home/blog
chown ylb -R /home/blog  #给你的用户添加权限

安装配置nginx

Nginx是一款轻量级的Web服务器、反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用。

apt-get install nginx
systemctl start nginx.service #启动nginx服务器

访问你的主机ip地址 看一下是否安装成功

image.png

修改配置

#配置目录sites-available
cd /etc/nginx/sites-available/
cp default elcarimqaq.top  #建议命名为你的域名
vim elcarimqaq.top 

#修改配置
server {
    listen 80;
    listen [::]:80;
    server_name elcarimqaq.top;
    root /home/blog;
}

#配置目录sites-enabled
ln -s /etc/nginx/sites-available/elcarimqaq.top /etc/nginx/sites-enabled/elcarimqaq.top #软连接

#取消default,否则配置会冲突
unlink default  
 
#进行检查,配置是否正确
nginx -t

#重启服务器
systemctl restart nginx.service

创建 git 仓库,用于存放博客网站资源。

回到当前用户的home目录

 #创建裸仓库
 git init --bare blog.git 
 
 #使用hook同步网站根目录
 cd blog.git/hooks
 vim  post-receive
 
 #修改文件
#!/bin/sh
git --work-tree=/home/blog--git-dir=/home/ylb/blog.git checkout -f

#修改权限
chmod +x post-receive 

为什么不直接将裸仓库克隆到 Web 根目录下呢?

出于项目安全的考虑,避免了将整个仓库历史暴漏在 Web 服务中。

最后更改本地的config的deploy为你的git仓库

deploy:
  type: git
  repo:  ylb@服务器ip:/home/ylb/blog.git  #https://github.com/ElcarimQAQ/elcarimqaq.github.io
  branch: master
  message: 

更换主题

如果你不喜欢默认的主题,可以对主题进行更换。主题传送门:https://hexo.io/themes/

我使用的主题为butterfly,在blog目录中打开命令行输入:

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

这是将主题下载到blog目录的themes主题下的文件夹中。打开站点的_config.yml配置文件,修改主题为butterfly:theme: butterfly

主题butterfly

butterfly的官方网站:https://butterfly.js.org/

你可以参考官方的文档进行一些配置的修改,我这里也会记录一些。

文章置顶

hexo-generator-index是官方默认的博客文章排序插件,无需额外安装。你可以直接在文章的front-matter区域里添加sticky: 1属性来把这篇文章置顶。数值越大,置顶的优先级越大。

评论区

butterfly支持多种评论区,我使用的为Valine

Valine官方文档:https://valine.js.org/quickstart.html

首先要注册一个LeanCloud 账号,然后创建一个你的评论应用。修改配置_config.butterfly.yml初始化对象中的appIdappKey的值为你的应用的值即可。

当然别忘了要下载

# Install valine
npm install valine --save

可以看到效果:

image.png

最终效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1012613.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

“存量竞争” 体验为王,火山引擎边缘云助力内容社区破局

今年4月&#xff0c;在宣布要技术升级、数据重构后&#xff0c;承载无数人青春的天涯社区疑似关停&#xff0c;一代传奇的衰落为所有内容社区释放出了不可忽视的信号。 图片来源&#xff1a;天涯官博 回顾天涯社区发展史&#xff0c;从“周公子大战易烨卿”、天涯十大诡异事件&…

“批量文件改名:将日语文件名翻译成中文,轻松管理你的文件!

如果你经常处理各种文件&#xff0c;可能有时候会遇到一些以日语命名的文件。这时候&#xff0c;为了更好地管理和查找文件&#xff0c;你可能需要将这些日语文件名翻译成中文。那么&#xff0c;如何实现批量将日语文件名翻译成中文呢&#xff1f; 首先&#xff0c;第一步进入…

对抗生成网络总结

对一些基本的对抗生成网络的总结。部分内容整理自Teeyohuang’s blog 文章目录 GAN (NeurIPS, 2014)CGANDCGANStackGANPix2Pix (CVPR, 2017)CycleGAN (ICCV, 2017)SRGAN (CVPR, 2017)StyleGAN (CVPR, 2019) GAN (NeurIPS, 2014) Generative adversarial nets m i n G m a x D …

有关‘全局唯一id‘

UUID和Snowflake的对比 当需保证全局唯一的id&#xff0c;可以选用UUID或Snowflake(及其变种) 其中UUID 不依赖于任何第三方系统&#xff0c;性能和可用性上较好&#xff1b; Snowflake生成的id具有单调递增性&#xff08;可以拿到生成时的时间戳信息&#xff09;&#xff0c;能…

深入了解MySQL中的JSON_ARRAYAGG和JSON_OBJECT函数

在MySQL数据库中&#xff0c;JSON格式的数据处理已经变得越来越常见。JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它可以用来存储和表示结构化的数据。MySQL提供了一些功能强大的JSON函数&#xff0c;其中两个关键的函数是…

HTML中name和class,id的区别和联系

在HTML中&#xff0c;name、class和id是用于标识和选择元素的属性。 区别&#xff1a; name属性&#xff1a;用于标识表单元素&#xff0c;特别是在提交表单时&#xff0c;用于识别表单数据。name属性可以在同一表单中的多个元素中重复使用。class属性&#xff1a;用于为一个…

品牌出海推广策略:海外网红营销和TikTok挑战赛的完美结合

随着全球化的深入&#xff0c;越来越多的品牌意识到在海外市场的存在至关重要。然而&#xff0c;进入国际市场并建立品牌知名度是一项复杂的任务&#xff0c;需要创新和多样化的策略。在这个数字化时代&#xff0c;品牌出海推广策略的一个令人兴奋的新趋势是将海外网红营销与Ti…

前端JavaScript Error 类: 异常处理与错误管理

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 引言 1. Error 类简介 2. Error 类属性 3. Error 类的 API 4. Error 类的应用场景 5. 自定义错误类型 6. 注意…

如何在微软Edge浏览器上一键观看高清视频?

编者按&#xff1a;视频是当下最流行的媒体形式之一。但由于视频压缩、网络不稳定等原因&#xff0c;我们常常可以看到互联网上的很多视频其画面质量并不理想&#xff0c;尤其是在浏览器端&#xff0c;这极大地影响了观看体验。不过&#xff0c;近期微软 Edge 浏览器推出了一项…

万字长文总结检索增强 LLM

连接&#xff1a;https://zhuanlan.zhihu.com/p/655272123 ChatGPT 的出现&#xff0c;让我们看到了大语言模型 ( Large Language Model, LLM ) 在语言和代码理解、人类指令遵循、基本推理等多方面的能力&#xff0c;但幻觉问题 Hallucinations[1] 仍然是当前大语言模型面临的一…

【初阶数据结构】树结构与二叉树的基础概念

君兮_的个人主页 勤时当勉励 岁月不待人 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;今天带来数据结构里的重点内容也是在笔试&#xff0c;面试中的常见考点——树与二叉树&#xff0c;其中二叉树又分为很多种&#xff0c;我们先来讲讲基础的内容带大家…

Notion+Zotero+Notero 联动教程(23年9月更新版)

准备 下载Zotero at https://www.zotero.org/ 下载Zotero Connector at https://www.zotero.org/download/connectors 下载Notion at https://www.notion.so/desktop 下载Notero at https://github.com/dvanoni/notero/releases 关系说明 Notion中的 database 与 Zotero 链接…

parse:uParse修复​​版,优化表格,css等,html富文本加载

https://ext.dcloud.net.cn/plugin?id364 自己搞微信小程序遇到的&#xff0c;uniapp 搞得 后台textarea富文本便捷器 录入的客户端显示&#xff0c;试了好几种都不行&#xff0c;尤其是表格图片排版的。

C++使用Boost库加入UDP组播时程序崩溃

程序崩溃情况 本程序运行在Oracle VM VirtualBox虚拟的Ubuntu20.04上 terminate called after throwing an instance of ‘boost::wrapexceptboost::system::system_error’ what(): set_option: No such device 已放弃 (核心已转储) ** C使用Boost库加入组播的代码 #inclu…

计算机视觉的应用15-图片旋转验证码的角度计算模型的应用,解决旋转图片矫正问题

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用15-图片旋转验证码的角度计算模型的应用&#xff0c;解决旋转图片矫正问题&#xff0c;在CV领域&#xff0c;图片旋转验证码的角度计算模型被广泛应用于解决旋转图片矫正问题&#xff0c;有效解决机…

腾讯mini项目-【指标监控服务重构】2023-07-20

今日已办 Trace otelzap &#xff1a;opentelemetry-go-extra/otelzap at main uptrace/opentelemetry-go-extra (github.com) go get github.com/uptrace/opentelemetry-go-extra/otelzap声明 Tracer &#xff0c;一个应用创建一个 Tracer &#xff08;需要从venus中来传来…

OGAI详解:AIStation调度平台如何实现大模型高效长时间持续训练

大模型是当前通用人工智能产业发展创新的核心技术&#xff0c;目前国内已发布的生成式AI模型超过了100个。面向以大模型为核心的生成式AI开发与应用场景&#xff0c;近日浪潮信息发布了大模型智算软件栈OGAI&#xff08;Open GenAI Infra&#xff09;——“元脑生智”&#xff…

【最新面试问题记录持续更新,java,kotlin,android,flutter】

最近找工作&#xff0c;复习了下java相关的知识。发现已经对很多概念模糊了。记录一下。部分是往年面试题重新整理&#xff0c;部分是自己面试遇到的问题。持续更新中~ 目录 java相关1. 面向对象设计原则2. 面向对象的特征是什么3. 重载和重写4. 基本数据类型5. 装箱和拆箱6. …

Java基础-异常处理

文章目录 异常机制的作用异常存在的形式 异常机制的作用 什么是异常&#xff0c;异常的作用&#xff1f;程序在执行的过程中发生了不正常的情况&#xff0c;而这种情况被称之为"异常"。Java语言是很完善的语言&#xff0c;提供了异常的处理方式&#xff1a;Java把异…

这所院校太好考了!地处魔都!不要错过!

一、学校及专业介绍 上海电力大学&#xff08;Shanghai University of Electric Power&#xff09;&#xff0c;位于上海市&#xff0c;是中央与上海市共建、以上海市管理为主的全日制普通高等院校&#xff0c;是教育部首批“卓越工程师教育培养计划”试点院校、上海高水平地方…