个人博客的搭建及写作

如何搭建个人博客

买域名

• godaddy.com
• https://buy.cloud.tencent.com/domain

选择博客框架

静态博客：

• Hexo (https://hexo.io/zh-cn/)
• Hugo (https://www.gohugo.cn/)
• VuePress (https://www.vuepress.cn/)
• Jekyll (https://www.jekyll.com.cn/)

动态博客：

• WordPress (https://wordpress.org/)
• Typecho (https://typecho.org/)
• Halo (https://halo.run/)

所谓的动态网页，是指跟静态网页相对的一种网页编程技术。静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了——除非你修改页面代码。而动态网页则不然，页面代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的

Hexo
Hexo 是一个基于Node.js的快速、简洁且高效的静态博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。Hexo具有丰富的主题、插件系统。
优点

• 纯静态博客，部署简单、成本低廉、运行优化非常高效。
• Hexo 静态博客框架可以在云端，也可以在本地电脑上甚至手机上。
• Hexo 框架的博客网站没有网站后台，不存在后台安全漏洞的问题。
• 因为是纯静态的，几乎所有的 CDN 服务都可以完美的加速提升浏览速度。
• 搜索引擎对纯静态网站有天然的青睐度，收录、权重优先权明显。
• 纯静态网站会让网络攻击成本大大的增加也就是说纯静态网站被攻击的可能性更低了

安装git：

1. https://git-scm.com/downloads

2. git –version
   如果电脑自带git，会提示如下:
   
   如果电脑没有没有git，系统可能会给出如下提示信息：
   

3. 利用 brew 工具包管理器进行 git 安装，如果本机没有 brew，可以使用如下命令安装：

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

   安装完成后，就可以安装 git 工具，执行命令如下：

   brew install git

安装node.js

地址：https://nodejs.org/zh-cn/download/
查看下Git、Node.js版本，确保安装无误：

git --version 
node -v   
npm -v 

安装Hexo

npm install -g hexo-cli

目录权限问题：

修改目录文件权限：

chmod -R 777 /usr/local/lib

mac直接：

sudo npm install hexo-cli -g

出现如下提示代表安装成功：

也可以check一下：

hexo -v

首先我们需要新建一个项目目录，例如在桌面的code目录下新建一个HexoBlog文件夹用于存放该项目相关文件:

cd  /Users/stephen/Desktop/code 
cd myblog&&mkdir myblog

mkdir：创建文件夹
cd：进入文件夹
初始化博客

hexo init 

进入文件夹，安装一下npm：

cd myBlog 
npm install

初始化成功！可以在文件夹里找到如下文件：

node_modules：用来存储已安装的各类依赖包
scaffolds：博客模版文件夹，包含page.md，post.md，draft.md三种
source：资源文件夹，存放静态资源如博客md文件、图片等
themes：主题文件夹，Hexo通过将网站内容与主题组合来生成静态网站
package-lock.json：锁定依赖库版本的文件
package.json：应用数据，Hexo的版本以及相关依赖包的版本等
config.landscape.yml：主题配置文件
config.yml：站点配置文件，对站点进行配置
hexo指令：https://hexo.io/zh-cn/docs/commands

更换博客主题

cd /Users/stephen/Documents/GitHub/myblog

git clone https://github.com/cofess/hexo-theme-pure.git themes/pure

打开_config.yml，更改主题名称
theme: xxxx

本地查看博客

生成页面，每次你加入了一篇新博客的时候，都要生成一次

hexo g

进入myblog文件夹，启动本地服务：

cd /Users/stephen/Documents/GitHub/myblog
hexo s

浏览器输入：localhost：4000 即可看到 （172.20.10.3:4000）

添加live2d模型

安装

npm install --save hexo-helper-live2d

在 hexo 的 config.yml中添加参数：

live2d:
enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-‘模型名字’
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

下载模型

npm install --save live2d-widget-model-`模型名字`

其他模型：

• live2d-widget-model-hijiki
• live2d-widget-model-hibiki
• live2d-widget-model-tororo

运行！

安装包

sudo npm install -g yuque-hexo

代码托管

github：https://github.com/
图形化界面管理：GitHub desktop

部署平台-Vercel

用github账号登录，步骤：

1. add new project
2. import
3. browse all templates>hexo>deploy

账号准备

请注册好：Github 账号

再前往Vercel 网站 使用Github账号注册一个账号。这样注册好以后 Vercel里面就可以看到你 Github 里面的项目了。

创建 Hexo 项目

创建 Hexo 项目直达链接：

Deploy

这时候就到了创建 Hexo 项目的页面了。

左边的 Git Scope 是你的 Github 账号，右边 REPOSITORY NAME 是你账号下 Hexo 博客仓库的名字，你的博客源文件就存放在这里，名称可以自选

项目可见性就保持 Private，这样别人就看不到你 Hexo 仓库的各种机密信息了，有效保持版权和隐私

最后点击 Create 创建项目，等一会就好了。

最后成功以后，会给你一个二级域名，这个二级域名是属于你的，不会回收，建议可以调试的时候临时使用。

部署完成后，它就和你刚刚所填写的仓库绑定了，一旦你的仓库有什么变化，它就会自动同步部署，全过程大概 5 分钟可以完成部署。

你现在可以点击那个二级域名，就可以看到你的 Hexo 博客了。

但是不建议长期使用。

原因有下：

• 这个 vercel.app 域名已经被各大搜索引擎屏蔽，无法被收录
• 这个 vercel.app 根域名已经被中国大陆防火长城屏蔽，中国国内无法访问，如果你的读者面向国内，不建议使用

所以建议绑定自己的域名。

如何以更轻松的方式写blog

markdown语法

很多工具都支持markdown写作，我自己常用obsidian和typora，配合picgo和云服务器能大幅提高图片管理效率
基础教程：
Markdown 教程 | 菜鸟教程
进阶教程：
Markdown笔记 | 一篇最详细的Markdown 教程 –> 收好-腾讯云开发者社区-腾讯云

typora+picgo+腾讯云COS

它山之石：手把手教你Typora图床配置(PicGo+阿里云OSS/腾讯云COS)-阿里云开发者社区
配置过程稍微有点复杂，但是配置完成后，用typora写文章时，只需要将图片拖到typora，就能自动上传到云服务器（即图床)并生成可访问的URL，写作体验直线上升！！
首先准备好三个工具:

1. 安装typora，下载地址
2. 安装picgo，下载地址
3. 注册、登录腾讯云

picgo关联typora

第一步：检查一下server是否打开，目前默认都是打开的

可以选择需要显示的图床，默认全部勾选的，建议用哪个勾选哪个
第二步：打开typora的设置，1、选择图像；2、插入图片时：上传图片；3、上传服务：picgo.app

腾讯云COS搭建图床

购买cos服务
注意新用户有优惠，1元享50G/年存储容量

创建bucket
配置如图，其中区域可以选择附近的城市

申请密钥
前往个人中心，新建密钥拿到SecretId和SecretKey

到这里我们能得到的东西有：

• SecretId、SecretKey
• APPID
• bucket名称
• 所在区域（存储区域）

最后一步，打开picgo的设置>图床设置/腾讯云COS，将所需信息填入即可，注意：存储路径为在bucket中创建的文件夹名。