创建博客

1.如何创建属于自己的私人博客

可以借鉴的文章：https://pdpeng.github.io/2022/01/19/setup-personal-blog/#%E5%BA%8F%E8%A8%80

1.开发工具

Webstorm

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。

下载：https://www.jetbrains.com/webstorm/

2.框架

i.Hexo（推荐）

1.快速，简单，功能强大，用Markdown写帖子，就会生成带有漂亮主题的静态文件。
2.多平台：本地、云、PC、移动端通吃支持
3.多种CDN服务（开启可以提高网页的打卡速度）
4.各大搜索引擎对网站的收录及权重有较大优势（用户搜到你发布的内容可能性更大）

下载：https://hexo.io/zh-cn/index.html

ii.WordPress

特性：

  • 商用范围广
  • 方便后续备份和转移，有自带的工具支持
  • 扩展性强（可联想Google的插件商城）
  • 对自定义用户友好

如果你并不像看那些代码，可以用这款，WordPress自带后端管理，选择自己想要的主题，然后拖拽所需控件（比如你想实现显示时间这个功能，会有一个像手机端桌面小组件一样的东西，拖拽到想显示的位置即可实现）。另外最重要的是，使用它你需要先搞一台服务器

下载：https://cn.wordpress.org/

本地环境

git

git入门：

https://www.runoob.com/git/git-basic-operations.html

下载： https://git-scm.com/

配置环境

Java开发环境配置/Vscode搭建 https://blog.csdn.net/m0_51269961/article/details/118875967
打开Path变量后，添加本地安装环境目录（确保文件位置到达cmd）
确保文件位置到达cmd

node.js

下载：https://nodejs.org/en/
可以下载LTS版

LTS代表“Long Term Support（长期支持）”，Current代表“当前的”
Current就代表最新发布的版本（每6个月一次的），它可能是奇数版本也可能是偶数版本

Hexo

安装

桌面右击，打开git bash here输入命令安装（默认位置即可，方面后续配置，不建议修改）

1
npm install -g hexo-cli

初始化

在你本地任意位置（但要记住路径）方便起见建议直接在除C盘的任意盘符下的跟目录新建，命名任意，比如我这里是在D盘新建的 hexo文件夹

在该文件夹下打开 git bash here 输入命令

1
hexo init

![在该文件夹下打开 git bash here](/博客创建/在该文件夹下打开 git bash here.png)

可能会遇到这个错误，不要慌张，是从GitHub克隆时网络原因，多试几次就好
可能错误

Git中pus错误： https://www.cnblogs.com/fairylyl/p/15059437.html

成功效果
成功效果

文件根目录下多了这些文件
文件根目录下多的文件

简单介绍下hexo的文件结构：

  • public 最终所见网页的所有内容
  • node_modules 插件以及hexo所需node.js模块
  • _config.yml 站点配置文件，设定一些公开信息等
  • package.json 应用程序信息，配置hexo运行所需js包
  • scaffolds 模板文件夹，新建文章，会默认包含对应模板内容
  • themes 存放主题文件，hexo根据主题生成静态网页（速度贼快）
  • source 用于存放用户资源（除 posts 文件夹，其余命名方式为 “ + 文件名”的文件被忽略）

在WebStorm中打开根目录 hexo （直接将该文件拽到桌面WebStorm的快捷方式打开就行），打开终端并输入命令

1
hexo s

点击链接 http://localhost:4000（图中黄色下划线位置）进行本地预览，默认是hexo内置的landscape 主题

hexo主题

光标停留在 Terminal 位置，组合键 Ctrl + C 停止本地预览，这就是本地最简单的一个网站

主题

介绍下主题和框架，我们现在使用的Hexo是一款快速、简单的博客框架，主题就是开发者根据此框架开发的功能更加完备、页面样式、栏目更多的一种”配件“。就像你用的手机，换上手机壳，选手机壳时需要匹配自己手机的型号，不然也不配套啊是吧

样式

官方主题库：https://hexo.io/themes/

我使用的是butterfly

后续还需自己进行修改和维护

应用

  • Terminal 输入命令
1
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

等待安装完成，themes文件夹下就显示了butterfly主题的一些文件
butterfly主题的文件

  • 安装插件

安装 pug 以及 stylus 的渲染器，如果没有安装，预览界面是这样的

未安装的预览界面

控制台输入命令，等待安装即可

1
npm install hexo-renderer-pug hexo-renderer-stylus --save
  • 修改配置文件

网站根目录下找到**_config.yml文件，修改主题为butterfly（注意yml**文件格式）
修改主题为butterfly

  • 本地预览
1
2
3
hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览
  • 效果图

hexo效果图

还是比较简陋，后续还需自己进行主题美化

正式上线

图床

就是将本地图片转换成链接，减少占用服务器的空间

软件：GitHub,Picgo

https://cloud.tencent.com/developer/article/1622395

Butterfly

文档：https://butterfly.js.org/posts/4aa8abbe/

此方面后期再做详解

GitHub Pages配置

GitHub Pages是一种由GitHub中的仓库/项目直接创建的网页。管理简单，在本地编辑仓库中的内容，上传到GitHub上，GitHub Pages就能快速完成更新。

新建仓库：
新建仓库

保证仓库public，名称填写正确用户名.github.io，系统自动变更为Pages

在仓库设置中找到Pages
在仓库设置中找到Pages

记住仓库地址，我们会将本地的文件上传到仓库
仓库地址

如果你是在电脑上第一次使用git，请先配置SSH公钥（一种安全协议，你可以理解为登陆某网站需要的验证码）

在WebStorm中链接到远程，添加仓库地址，这里不是发布网站需要的仓库（非“用户名”+github.io仓库，新建一个，为了管理本地代码）
创建远程仓库

修改网站部署设置
修改网站部署设置

在网站本地根目录下打开 git bash here 依次执行以下命令

1
2
3
4
hexo clean //执行此命令后继续下一条
hexo g //生成博客目录
hexo s //本地预览
hexo d //部署项目

执行完毕后，所有人就能通过你的用户名+github.io这个域名访问你的网站了。到这儿，我们就成功上线了自己的网站

hexo d 操作常出现的错误

1.email错误

错误指令：

1
fatal: unable to auto-detect email address (got '     .(none)')

解决方法：
打开文件目录根
首先 打开隐藏的项目

打开隐藏文件夹

然后打开 Data（D:）> hexo > .git文件 > config文件
添加：

1
2
3
[user]
email = youremail
name = youremailname

添加email

2.错误形式：On branch master nothing to commit, working tree clean

这个错误的意思是当前分支 master 上没有需要提交的更改，工作树（working tree）是干净的。

可能原因：
你还没有进行任何修改，也就是说在上一次 commit 后，你没有对代码库做出任何更改。

3.Error: Spawn failed

错误代码

1
2
3
4
5
6
7
8
9
10
11
fatal: unable to access 'https://github.com/zhou-h-yi/zhou-h-yi.github.io.git

': Encountered end of file
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (/usr/local/src/hexo/hanyubolg/node_modules/hexo-util/lib/spawn.js:51:21)
      at ChildProcess.emit (events.js:376:20)
      at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html

解决方式一：
有可能是你的git repo配置地址不正确,确认并修改即可
修改位置
修改repo地址

解决方式二：
直接将 .deploy_git 文件直接删除
然后
hexo clean
hexo g
hexo d
即可

2.上传文章

在笔记软件中写markdown方式的文章

在文件夹source->_posts新建md文档

将日常文章复制粘贴到md文档中

上传即可