Hexo搭建个人博客系列之环境准备

news/2024/12/22 15:09:41/

环境准备

  • Git Git官网,安装过程,就是一直下一步,详细的看这篇文章
    Git的安装

  • Node.js Node.js官网 Node.js的安装
    在这里插入图片描述

  • 注册一个GitHub账号

  • 安装hexo
    新建一个文件夹(位置任意),运行cmd(若出现了operation not permitted,就以管理员的权限来运行cmd),运行下面的命令

hexo init

接下来就是等待了,安装过程中很有可能会出现超时,解决办法是多试几次,或者用工具
下载之后的结果
在这里插入图片描述
若你着急要看页面的话,运行下面的命令

hexo clean
hexo generate
hexo deploy

hexo clean:清除文件
hexo generate:重新生成文件
hexo deploy:部署,执行这个命令后会有一个网址,复制到浏览器后打开就能看到博客了,当然这是本地部署的

hexo的目录

  • node_modules:
  • public:
  • scaffolds:
  • source:
    • _data
    • _posts
    • about
  • themes:主题
  • _config.yml:博客的配置文件
- node_modules 依赖包
- public 生成的页面,即index.html
- scaffolds 生成文章的一些模板
- source 存放文章的- _data- _posts- about- archives- categories- friends- tags
- themes 主题相关的

连接github仓库

新建一个github仓库,仓库名称必须为你的用户名.github.io

配置ssh公钥

在git bash中输入下面的命令

git config --global user.name "yourname"
git config --global user.email "youremail"

看看有没有输错

git config user.name
git config user.email

SSH:专业的解释自行百度,ssh就是一个密钥,密钥分为公共密钥和私人密钥,公钥放在Github上,用自己的账户连接Github的时候,Github会根据公钥来匹配私钥,匹配通过那么就可以上传文件到Github上

ssh-keygen -t rsa -C "youremil"

这条命令会告诉你结果所在的文件夹
在gti bash中输入

cat ~/.ssh/id_rsa.pub

复制结果
在github中,点击头像,选择settings->SSH and GPG keys->新建SSH,名字任意,直接把上面的结果复制到钥匙这个文本框中,点击添加密钥按钮

测试

在git bash中输入ssh -T git@github.com,若结果为

Hi 你的用户名! You’ve successfully authenticated,but GitHub does not provide shell access.就是成功了

将hexo部署到Github上

更改_config.yml的,更改最后一行的配置

deploy:type: 'git'repo: git@github.com:username/reponame.github.io.gitbranch: master

执行下面的命令,安装deploy-git

npm install hexo-deployer-git --save

执行下面的命令

hexo clean & hexo generate & hexo deploy

设置域名

这个是可选的,国内的阿里云,腾讯云,华为云都可以
设置的话
在这里插入图片描述
将仓库与域名绑定,点击仓库->settings->page->custom domain将域名复制进去即可

发布文章 写文章

hexo new post "文章名字"

打开source_posts目录,就会发现多了一个文件夹和一个.md文件,一个是存放图片等等数据,另外一个是文章数据
编写完了之后运行下面的命令

hexo clean & hexo generate & hexo deploy

切换主题

这里我按照网上的做法试了,出现了bug,bug描述:页面能显示,但是文字,图片等等不能显示,打开控制台后报了一大堆的错,所以改用下面的做法

安装aurora的主题包

运行下面的命令

yarn add hexo-theme-aurora hexo-plugin-aurora

拉取aurora主题配置文件

aurora主题配置文件
把这个文件的内容复制过来

修改_config.yml文件

打开hexo根目录下的_config.yml,把theme的值改为aurora

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: aurora

设置permalink

因Aurora主题用到了Vue-router,但Hexo默认生成的页面和文章的permalink与我们的Vue-router中的path是不相符的,这样会出现无法访问的问题,所以需要修改Hexo默认配置文件里面的permalink参数

  • 打开_config.yml文件
  • 将permalink参数修改为/post/:title.html
permalink: /post/:title.html
permalink_defaults:
pretty_urls:trailing_index: true # Set to false to remove trailing 'index.html' from permalinkstrailing_html: true # Set to false to remove trailing '.html' from permalinks

设置代码高亮

Aurora主题使用Prismjs来实现代码高亮显示,但Hexo默认是用highlight.js的,所以需要修改配置

  • 把highlight的启动改成false
  • 把prismjs的启用改为true
  • 把prismjs下的preprocess改为false
highlight: enable: falseline_number: trueauto_detect: falsetab_replace: ''wrap: truehljs: false
prismjs:enable: truepreprocess: falseline_number: truetab_replace: ''

创建About(关于)页面

Aurora主题默认有about页面,因此我们需要创建这个about页面,否则主题就无法显示about页面

执行下面的hexo命令

hexo new page about

结果就是在source文件夹中多了一个新的文件夹about,about下面有个index.md,这个index.md的内容随意修改,直接展现在About页面中

最后

若修改了hexo的配置文件,或者需要上传github,那么都是重新运行下面的命令

hexo clean & hexo generate

若想在本地看看效果再运行下面的命令

hexo serve

若想上传到Github中就运行下面的命令

hexo deploy

http://www.ppmy.cn/news/1167641.html

相关文章

插槽的基本使用和作用域插槽

1.编译作用域 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。 即父子组件只能使用各自作用域的数据 2.插槽的后备内容(slot中默认配置内容) 可以在slot中提前设置一段内容作为默认值&#xf…

AttributeError: ‘version_info‘ object has no attribute ‘__version__‘

问题描述 这个问题相对来说比较简单,其实还是版本的问题AttributeError: version_info object has no attribute __version__,很明显是因为版本迭代,导致部分版本省略了。 AttributeError: version_info object has no attribute __version__…

【2023淘宝双十一活动什么时间开始?天猫双十一2023具体时间安排

2023双十一活动什么时间开始?让我们先来了解一下双十一的优惠活动以及玩法吧。请收藏这份2023年淘宝天猫双十一玩法优惠攻略,让你轻松购得心仪的商品! 红包派送 活动期间,每天都可以领取超级红包!请注意&#xff0c…

【学习草稿】bert文本分类

https://github.com/google-research/bert https://github.com/CyberZHG/keras-bert 在 BERT 中,每个单词的嵌入向量由三部分组成: Token 嵌入向量:该向量是 WordPiece 分词算法得到的子单词 ID 对应的嵌入向量。 Segment 嵌入向量&#x…

面试算法32:有效的变位词

题目 给定两个字符串s和t,请判断它们是不是一组变位词。在一组变位词中,它们中的字符及每个字符出现的次数都相同,但字符的顺序不能相同。例如,"anagram"和"nagaram"就是一组变位词。 分析 如果只考虑英文…

CV计算机视觉每日开源代码Paper with code速览-2023.10.20

精华置顶 墙裂推荐!小白如何1个月系统学习CV核心知识:链接 点击CV计算机视觉,关注更多CV干货 论文已打包,点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【目标检测】Click on Mask: A Labor-efficient Annotati…

PCA降维可视化

二维 import pandas as pd import warnings warnings.filterwarnings("ignore")df pd.read_csv(data/data.csv).dropna() features df.columns[:-1] X, y df[features], df[label]from sklearn.preprocessing import MinMaxScaler # 创建MinMaxScaler对象 scaler…

【Python numpy】创建Ndarray数组对象

文章目录 前言一、numpy.array()函数1.1 函数基本介绍1.2 示例代码创建一个包含整数的一维数组创建一个指定数据类型的一维数组创建一个多维数组创建一个具有最小维度要求的数组 二、numpy.empty()函数2.1 empty()函数介绍2.2 示例代码创建一个未初始化的一维数组创建一个未初始…