搭建博客（一）本地应用安装及配置

发表于2023-12-22|更新于2024-01-03|Blog

|总字数:1.2k|阅读时长:4分钟|浏览量:

前言

作为一个擅长遗忘的人
我们每次学到新东西之后
过个几天就有可能忘记了
之前喜欢用浏览器标签保存
结果现在一看999+
所以还是老老实实去写文章吧

2023.12.22

这篇文章从2022.03.03开始撰稿
但是一直反复从不同的theme中横跳
也是因为自己的生活状态在当时发生了一点点变化
也感谢马总给我了一个DDL
才能让我们这篇文章重新启动

需求

之前一直在刷CTF的题目
于是我就想着写或不写，都会忘记
那我们为什么不水一下文章呢？
就像现在我一样在水字数
我只是需要一个静态的页面
我们每次写完直接pull上去就OK
那我们最后决定的就是
Markdown写作加上网站托管
~~国内使用Coding【吃相难看】~~
~~国外走Github Page【不能私有库 Page】~~
全线走Github + Cloudflare 托管

吐槽

原本想着自己一定不要花太多的时间去维护我的Blog
但是现在写着写着写上瘾之后
感觉自己那种闷骚无处发🐍的欲望要爆发了

基础应用安装

Windows Terminal

Windows 11 可以跳过这一步

应该大家都有Windows Terminal了吧？
没有？那我带着大家安装一下吧
Winget安装的优势就是不用配置环境
首先我们的电脑系统不能太久
Windows 10版本低于1809的大神们就点一下右上角的❌

我们打开Windows自带的Mircosoft Store

搜索Windows terminal

然后你们下载完之后重启即可

Git

桌面右键选择在终端中打开

然后我们搜索Git

1	winget search git

下载Git进行安装

1	winget install Git.Git

我们还是右键打开Git Bash Here

然后我们可以查看Git版本

1	git --version

VScode 安装

直接 winget 搜索 VScode

1	winget search vscode

winget 安装 vscode

1	winget install Microsoft.VisualStudioCode

VScode Markdown 环境配置

Vscode可是个神器
虽然我也知道Typroa很多人在用
但是挡不住我是个白嫖怪呀
而且Markdown只是Vscode的一个副业啊

安装 VScode Markdown 插件

我们只需要侧边栏的扩展搜索

GitHub Markdown Preview

Markdown Extension Pack

Markdown Extension Pack

Markdown-Notes-Pack

基本上我们常用来写Markdown的工具都整合在这里了

Markdown Paste 【VScode 插件推荐】

结果我今天在写这篇文章的时候
居然发现了一个叫Markdown Paste的扩展

不仅可以复制图片，GIF、表格也不在话下
不过美中不足就是复制的时候我们要Enter确认一下

复制GIF的时候我们要复制图片链接

然后我们Ctrl + Alt + D下载即可

然后我们就能看见这只彩虹猫了

PixPin

替代 Snipaste 的神器
支持 GIF 和 长截图

1	https://pixpinapp.com/

Picview

支持 10bit HEIC

1	https://picview.org/

caesium

开源软件，支持Windows和macOS。
可以批量压缩图片，无限制。
可以去除图片敏感数据。

1	https://saerasoft.com/caesium/

系统框架安装配置

Node.JS 框架安装

Hexo

我们需要搜索Nodejs

1	winget search nodejs

下载Git进行安装

1	winget install OpenJS.NodeJS.LTS

查看Node.JS版本

npm -v

Node.NS 切换镜像源

我们切换不同的镜像使得我们下载速度较快
我们这次会用淘宝源和官方源作为演示例子

全局切换镜像源命令

1	npm config set registry http://registry.npm.taobao.org/

查询源版本

1	npm get registry

切换官方镜像源

1	npm config set registry http://www.npmjs.org

Hexo 框架安装

我们直接用Git Bash Here运行

1	npm install -g hexo

我们使用命令查看Hexo版本

hexo v

Hexo 权限配置

存在问题

如果我们使用 Powershell 进行 hexo v 操作时会报错
原因是因为我们开放第三方脚本的运行权限

解决问题

使用 管理员权限 打开 Windows erminal

将计算机的执行策略更改为 RemoteSigned

1	set-ExecutionPolicy RemoteSigned

然后输入 get-ExecutionPolicy 查看执行策略

Hexo 框架初配置

Hexo 初始化

我们进入到我们想要的存放的文件夹
右键打开Terminal
然后注意我们的地址是否正确

hexo init

然后我们可以看见文件夹

Hexo 编译

hexo g

启动 Hexo 本地服务

hexo s

然后允许一下防火墙的策略

正常来说我们就这样可以打开本地网站

1	http://localhost:4000/

Hexo 端口被占用

但是你们遇到了我这种端口被堵塞的情况

然后我们需要指定端口

1	hexo s -p <port>

然后我们用浏览器打开URL
我们可以发现Hexo的初始页面

参考 & 引用

https://butterfly.js.org/
https://shoka.lostyu.me/
https://www.drflower.top/

文章作者: JimLeon595

文章链接: http://blog.jimleon595.top/posts/e22cfc48.html

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 JimLeon595！

Blog Website Git NPM Hexo Markdown VScode

相关推荐

搭建博客（四）Hexo更换主题

前言 Hexo主题琳琅满目我作为一个二刺螈当然我们的Blog也要二刺螈 2023.12.24 现在我变了我要做一个不宅的二刺螈还是浓度不要这么高捏不然怎么认识姊姊仔 Hexo 主题推荐 Theme.Butterfly.Demo 现在作者依赖定制化太强且主题也疏于维护了小弟技术也不好无法进行定制化的修改那我们就使用butterfly吧 1https://github.com/jerryc127/hexo-theme-butterfly 然后我们来看看作者大大的Demo 1https://butterfly.js.org/ Theme.Shoka.Demo 之前一开始在用Theme.Shoka 1https://github.com/amehime/hexo-theme-shoka 下面这个是Shoka开发大佬Ruri Shimotsuki的博客 1https://shoka.lostyu.me/ Hexo 主题下载下载 Hexo 主题十分简单选择你喜欢的 Hexo 主题我们直接在 Terminal 里面 git 一份就🆗 我们就直接使用稳定版吧...

搭建博客（八）主题插件进阶配置

前言这个是一些比较基础但是Jerry大佬没有整合进去的功能因为不受Hexo Butterfly 官方支持所以可能会存在一些奇奇怪怪的问题图片路径转换介绍为了让我们的照片放在对应的文件夹下面我们需要安装一个叫做 hexo-asset-image 插件安装插件 1npm install hexo-asset-img --save 修改 Hexo 配置文件修改 _config.yml 文件 1post_asset_folder: true Markdown 图片格式然后我们还要把文章中粘贴的图片名改为 {% asset_img "Picture_Name" "" %} 之后我们每次生成新文章时都会读取我们的文章下属文件夹的照片了永久链接介绍为了不要让我们的文档名经常变来变去我们使用这个Hexo-abbrlink 进行指派永久编号从而让每一篇文档无论怎么修改也是同一个网址访问安装插件 1npm install hexo-abbrlink --save 修改 Hexo 配置文件修改 _config.yml 文件修改 ...

搭建博客（二）远程应用安装及配置

前言都不知道到底是之前那一篇还是这一篇应该算是首篇Blog配置长话短说这一篇就是教大家如何把写好的Blog 上传到我们的Github 然后部署到我们的Cloudflare Page Windows Git 连接 Github 以下默认在 Windows Terminal + Git 环境下使用配置本地 Git 连接账户 12git config --global user.name "Github_Username"git config --global user.email "Github_Email" 生成 SSH 密钥输入下面的命令生成 SSH 密钥 1ssh-keygen -t rsa -C "Github_Email" 默认配置直接点击三下回车密钥默认保存到 C:\\Users\\<User>/.ssh id_rsa 是私钥 id_rsa.pub 是公钥记下 id_rsa.pub 文件中内容 Setting --> SSH and GPG ke...

搭建博客（六）主题插件基础配置

前言本文系参考Butterfly 作者 Jerry 大佬进行编写仅会记录自己需要用的功能点详细其他更加细化的功能请参考大佬的配置文章 https://butterfly.js.org/posts/ceeb73f/ Math (数学) 文章中数学功能我们选择使用 KaTeX Mathjax 和 KaTeX 二选一 Mathjax 功能比较齐全 KaTeX 比较轻量化比较快修改 Theme 配置文件修改根目录中的 _config.butterfly.yml 文件搜索关键字 Math 按照自己的需求更改以下字段 1234567# KaTeX (数学)katex: enable: true # true 表示每一页都加载 katex.js # false 需要时加载，须在使用的Markdown Front-matter 加上 katex: true per_page: false hide_scrollbar: true 替换 Markdown 渲染器卸载掉 marked 插件 1npm uninstall hexo-renderer-marked...

搭建博客（十）添加地图插件

前言现在在家里蹲不住了有空就想出去玩 VLog 不会拍只有写写游记咯那写游记就加上定位很正常吧安装 1npm install hexo-tag-map 特性功能介绍支持标记点提示文本支持各个地图缩放等级配置支持经纬度配置支持地图容器宽高配置支持默认展示地图类型配置用法超级简单，Butterfly已验证支持地图类型功能混合地图混合切换GoogleMap、高德地图、Geoq地图，常规地图+卫星地图+卫星标注地图共7个图层的地图 GoogleMap 单独的谷歌地图+谷歌卫星地图高德地图单独的高德地图+高德卫星地图+高德卫星标注地图百度地图单独的百度地图+百度卫星地图 Geoq地图单独的Geoq地图+5种显示风格 openstreetMap 单独的openstreetMap常规地图用法 Markdown 语法 1{% + 标签值 + 经度 + 纬度 + 文本 + 缩放等级 + 宽 + 高 + 默认图层 + %} 参考取值地图名标签值<必填> 经度(-180...

搭建博客（三）Hexo页面定义

前言下面这个这些定义类的东西我就直接抄Jerry大佬的吧 Front-matter Front-matter 是 Markdown 文件最上方以 --- 分隔的区域，用于指定个别档案的变数。 Page Front-matter 用于页面配置 Post Front-matter 用于文章页配置 Page Front-matter 模板如下 12345678910111213141516---title:date:updated:type:comments:description:keywords:top_img:mathjax:katex:aside:aplayer:highlight_shrink:random:--- 写法解释 title 【必需】页面标题 date 【必需】页面创建日期 type 【必需】标签、分类和友情链接三个页面需要配置 updated 【可选】页面更新日期 description 【可选】页面描述 keywords 【可选】页面关键字 comments 【可选】显示页面评论模块 (默认 true) ...

数据加载中