hexo搭建一个自己的博客

2023-09-15 19:06:09

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

最终效果

更多推荐

RabbitMQ及各种模式

目录一、MQ的基本概念1.1MQ概述1.2MQ的优势和劣势1.3MQ的优势1.应用解耦2.异步提速3.削峰填谷1.4MQ的劣势小结1.5常见的MQ产品1.6RabbitMQ简介1.7JMS小结二、RabbitMQ管控台三、HelloWorld简单模式​编辑1、生产者​编辑2、消费者​编辑四、Workqueues工作队列

CRM软件系统维护客户的主要方法

客户的重要性,相信每一个做企业的人都非常清楚。为了维护好客户,很多企业都使用CRM客户管理系统,建立“以客户为中心”的经营理念,提高企业客户服务水平,进而在提高客户满意度的同时提高企业的盈利。那么,企业如何通过CRM系统维护客户?1、客户信息管理CRM作为客户管理系统,它的主要功能就是对客户信息的收集和管理。CRM系统

超全面的前端工程化配置指南

前端工程化配置指南本文讲解如何构建一个工程化的前端库,并结合GithubActions,自动发布到Github和NPM的整个详细流程。示例我们经常看到像Vue、React这些流行的开源项目有很多配置文件,他们是干什么用的?他们的Commit、Release记录都那么规范,是否基于某种约定?废话少说,先上图!上图标红就是

使用branch and bound分支定界算法选择UTXO

BnB算法原理分支定界算法始终围绕着一颗搜索树进行的,我们将原问题看作搜索树的根节点,从这里出发,分支的含义就是将大的问题分割成小的问题。大问题可以看成是搜索树的父节点,那么从大问题分割出来的小问题就是父节点的子节点了。分支的过程就是不断给树增加子节点的过程。而定界就是在分支的过程中检查子问题的上下界,如果子问题不能产

伦敦银一手是多少?

伦敦银是以国际现货白银价格为跟踪对象的电子合约交易,无论投资者通过什么地方的平台进入市场,执行的都是统一国际的标准,一手标准的合约所代表的就是5000盎司的白银,如果以国内投资者比较熟悉的单位计算,那约相当于15.5公斤的白银。至于一手伦敦银合约的总价值是多少,具体的数值会根据国际银价的波动而变化。如果以近期每盎司25

python经典百题之求数字位数及逆序打印

题目:给一个不多于5位的正整数,要求:一、求它是几位数,二、逆序打印出各位数字程序分析我们需要编写一个程序,能够接受不多于5位的正整数,然后分析其位数,并逆序打印出各位数字。可以利用取模和除法运算来实现逆序打印数字,同时通过不断除以10的方式确定位数。方法1:使用取模和除法defreverse_print(num):p

dvwa命令执行漏洞分析

dvwa靶场命令执⾏漏洞high难度的源码:$target=trim($_REQUEST[‘ip’]);是一个接收id值的变量array_keys()函数功能是返回包含原数组中所有键名的一个新数组。str_replace()函数如下,把字符串“Helloworld!”中的字符“world”替换为“Shanghai”:s

自然语言处理(一):基于统计的方法表示单词

文章目录1.共现矩阵2.点互信息3.降维(奇异值分解)1.共现矩阵将一句话的上下文大小窗口设置为1,用向量来表示单词频数,如:将每个单词的频数向量求出,得到如下表格,即共现矩阵:我们可以用余弦相似度(cosinesimilarity)来计算单词向量的相似性:similarity⁡(x,y)=x⋅y∥x∥∥y∥=x1y1

大模型训练为什么用A100不用4090

这是一个好问题。先说结论,大模型的训练用4090是不行的,但推理(inference/serving)用4090不仅可行,在性价比上还能跟H100打个平手。事实上,H100/A100和4090最大的区别就在通信和内存上,算力差距不大。H100A1004090TensorFP16算力1979Tflops312Tflops

React 全栈体系(七)

第四章Reactajax一、理解1.前置说明React本身只关注于界面,并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装)2.常用的ajax请求库jQuery:比较重,如果需要另外引入不建议使用axios:轻量级,建议使用封装X

Kotlin语言基础(二)-变量和数据类型

Kotlin语言基础-变量和数据类型一、Kotlin的变量Kotlin变量有两种形式var(variable)和val(value,取值)val定义只读量,一旦创建,其值不会发生变化例:vala=23那么对于a对应的值就只能是23,不会发生变化。如何试图对a重新赋值都会导致编译错误。var定义可变的变量,可以多次赋值修

热文推荐