使用Git搭建个人博客

2022-03-09 11:54:29 浏览数 (1)

为什么要搭建个人博客

  • 好记性不如烂笔头，方便日后整理回顾
  • 免费方便，不需要服务器不需要后台，不需要依赖除了git的外部服务
  • 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的
  • 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行
  • 博客内容可以轻松打包、转移、发布到其它平台
  • 全是静态文件，访问速度快
  • 为什么写博客：http://mindhacks.cn/2009/02/15/why-you-should-start-blogging-now/

准备工作

1. Git 下载（Git for windows 国内下载）、安装（安装时请勾选Add to PATH选项）、配置、生成SSH公钥

2. Github 账号申请 / Gitee（码云）账号申请、GitHub Windows客户端、配置SSH Keys

3. Node.js 下载安装

4. 文件编辑器 Markdown / Typora / Sublime Text / Notepad

使用Hexo、Node.js、Git搭建个人博客

HEXO 安装

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

本教程Hexo 安装版本为：vs_3.4.3；Node.js 版本为：vs_8.9.3。安装 Hexo 之前请先确保 Git 及 Node.js 安装成功，接下来只需要使用 NPM 即可完成 Hexo 的安装。

在计算机新建一个文件夹作为本地仓库，进入到文件夹 中单击右键，选择 “Git Bash Here” ， 进入Git Bash进行Hexo 下载：

方法一：

代码语言：javascript复制
安装cnpm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

使用cnpm安装hexo
$ cnpm install -g hexo-cli

方法二：

代码语言：javascript复制
$ npm install -g hexo-cli

如果安装失败，尝试切换安装源后再执行安装命令 npm install -g hexo-cli

官方源：
npm config set registry https://registry.npmjs.org/

淘宝镜像：
npm config set registry http://registry.npm.taobao.org/

注：如果提示权限错误，命令前加sudo,cnpm 是淘宝的开源镜像，国内访问比npm快。

Hexo 更新至最新版本，命令如下：

代码语言：javascript复制
$ npm update hexo -g

确认cnpm的版本和Hexo 版本信息，查看是否安装完成

代码语言：javascript复制
$ cnpm -v

$ hexo -v

HEXO 初始化及本地启动

执行下列初始化命令，Hexo 将会在当前文件夹中生成一个名为blog的文件（可以根据需要修改命令即可修文件名），文件内容包括：node_modules、scaffolds、source、themes等文件

代码语言：javascript复制
$ hexo init blog
$ cd blog
$ npm install

输入以下命令生成静态页面：

代码语言：javascript复制
$ hexo generate

新建完成后，指定文件夹的目录如下：

代码语言：javascript复制
.

├── _config.yml 网站的配置信息，您可以在此配置大部分的参数

├── package.json 应用程序的信息

├── scaffolds 模板文件夹

├── source 资源文件夹，存放用户资源

|   ├── _drafts

|   └── _posts

└── themes 网站主题文件夹

接着输入命令启动服务：

代码语言：javascript复制
$ hexo server

打印信息如下表示服务启动成功：

代码语言：javascript复制
INFO  Start processing

INFO  Hexo is running at http://localhost:4000/. Press Ctrl C to stop.

然后在浏览器中访问：http://localhost:4000/，如果4000端口被占用，可以更改端口号为8081

代码语言：javascript复制
$ hexo s --p 8081

INFO  Start processing

INFO  Hexo is running at http://localhost:8081/. Press Ctrl C to stop.

如果博客出现中文乱码，使用编辑器编辑 _config.yml 文件，设置编辑器的编码为 UTF-8 后进行保存即可。

hexo搜索功能

安装插件

到博客根目录打开Git bash here执行安装命令

代码语言：javascript复制
cnpm install hexo-generator-searchdb –save

修改站点配置文件

打开_config.yml 配置文件，在最底下添加下面代码

代码语言：javascript复制
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

path：表示搜索后生成的文件路径，可以生成xml和json两种格式；search.xml不可以就改为search.json field：表示搜索的范围，有“post、page和all”三种值。     post：所有的文章；     page：所有顶部导航选项的页面；     all：所有的文章和顶部导航选项的页面。 content：是否包含搜索到的文章的全部内容。如果false，生成的结果只包括标题和创建时间这些信息，没有文章主体。默认情况下是true. format：搜索到的内容、选项的格式。     html(默认)：将html原文本缩略。     striptags：将html原文本缩略，并删除所有标记。     raw：记下每一篇文章或每一页的文字。

使用插件

打开博客目录目录，找到当前正在使用的主题的“_config.yml”文件，打开进行编辑，找到“local_search”, 不同模板这个字段可能不同，修改enable的值为true。

代码语言：javascript复制
# 本地搜索
search_box: 
  enable: true

编写博文

进入source_posts文件下新建后缀为.md的markdown文件，编辑并保存，这就是一篇新的博文

也可以通过命令创建，常见命令如下

代码语言：javascript复制
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面，不会作为文章出现在博文目录。
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl   c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

如果博客的样式不对，尝试在_config.yml中配置下博客地址和路径：

代码语言：javascript复制
url: https://github.com/用户名/用户名.github.io.git/blog/
root: /blog

Hexo 部署至 Github

新建仓库 new repository ，命名为你的用户名.github.io（必须是你的用户名，其它名称无效，邮箱需要认证）

创建好仓库后，复制仓库地址：github.com/用户名/用户名.github.io.git

修改 _config.yml 配置文件 ，打开文件后找到 deploy， 修改如下：（注意冒号后面有一个空格： ）

代码语言：javascript复制
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  ##repo: https://gitee.com/用户名/用户名.git
  repo: https://github.com/用户名/用户名.github.io.git
  branch: master
  message:

编辑完成后进行保存，接着安装自动部署发布工具 hexo-deployer-git，命令如下：

代码语言：javascript复制
$ npm install hexo-deployer-git --save

等待安装完成以后，执行如下配置命令：

代码语言：javascript复制
$ hexo deploy

发布新博客或者更新配置文件，需要重新部署一下，首次发布需要输入账号和密码，命令如下：

代码语言：javascript复制
$ hexo clean
$ hexo generate
$ hexo deploy

在Github的上边栏选择Settings

找到GitHub pages设置界面

按如图所示选择，注意，选择source之后记得Save，然后点击Choose a theme选择一个博客主题，然后点击Select theme

在Gitee中选择服务下面的Gitee Pages，进行服务部署

发布完成，在Github/Gitee中部署项目

正常部署完成后打开浏览器输入：【https://您的 Github 名称/github.io】进行访问，例如：https://用户名.github.io。

修改Hexo 配置及博客主题

修改配置

  • title 网站标题
  • subtitle 网站副标题
  • keywords 网站的关键词。支援多个关键词。
  • description 网站描述 。主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词
  • author 您的名字 。用于主题显示文章的作者
  • language 网站使用的语言 。常见的有 zh-Hans和 zh-CN。
  • timezone 网站时区。默认使用您电脑的时区，对于中国大陆地区可以使用 Asia/Shanghai。

其他相关详细配置信息请参考 Hexo 配置 ：https://hexo.io/zh-cn/docs/configuration.html

选择主题

使用的主题都是放在/themes这个目录下，Hexo默认使用的是landscape主题，下载新的主题下来后，解压放入/themes文件夹下

选择一个自己喜欢的Hexo主题 ：https://hexo.io/themes/；https://github.com/hexojs/hexo/wiki/Themes

输入命令克隆主题：git clone https://gitee.com/xiuxiuing/hexo-theme-even themes/even ，完成后可以看到/themes下新增了even 文件夹。

以下为推荐主题：

  • ayer：一个美观实用且优雅的 Hexo 主题（推荐）。Preview 预览
  • butterfly：一个功能强大且复杂的主题。Demo: Butterfly
  • volantis：好看强大的图文集合。See docs: https://volantis.js.org
  • fluid：一款Material Design 风格。预览： Fluid's blog
  • magnetic：卡通卡片风格。Demo here.
  • Cxo：简约实在的主题。demo：Mr.Long's Blog
  • alpha-dust：科技风，Check out the demo
  • cactus：有点命令行界面的感觉。Demo
  • hexo-theme-arknights：明日方舟罗德岛阵营主题。Demo： http://ark.theme.yueplus.ink/
  • anatole-core：炫酷的分类标签，类似词云。Demo : https://www.jixian.io

主题更新

修改_config.yml文档内容中theme的值，将默认主题修改为下载的主题名（即/themes/下的文件名称）

代码语言：javascript复制
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## theme: landscape
theme: even

本地启动时，主题更新需要将服务重启。部署到GitHub后，进入到主题文件夹的目录下（如：../blog/themes/yilia/）执行推送更新命令

代码语言：javascript复制
$ git pull

然后返回到文件夹 ../blog 下，每次修改完配置文件，需要重新部署项目

代码语言：javascript复制
$ hexo clean
$ hexo generate
$ hexo deploy

上传本地图片到博客

我们需要将图片上传到外部服务后，在博客中使用生成的图片url，这里推荐PicGo软件，也可以上传到qq微博等能公开访问的第三方平台

使用Github：https://blog.csdn.net/qq_45163122/article/details/105584394

使用Gitee：https://blog.csdn.net/u013206259/article/details/105911868

hexo主题看板娘

链接：https://github.com/EYHN/hexo-helper-live2d

  • 其他模型：https://github.com/xiazeyu/live2d-widget-models
  • 模型预览：https://huaji8.top/post/live2d-plugin-2.0/
  • 模型推荐，白猫：tororo，黑猫：hijiki，妹妹：shizuku，水手：haruto/koharu

模型安装命令

代码语言：javascript复制
npm install --save hexo-helper-live2d
npm install --save live2d-widget-model-tororo

#在hexo的_config.yml的文件下添加(非主题配置文件)

代码语言：javascript复制
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  tagMode: false
  debug: false
  # 更换模型
  # 使用 npm install 模型的包名 来安装,然后将包名输入位于 _config.yml 的 model.use 中.
  model:
    use: live2d-widget-model-hijiki
    #use: live2d-widget-model-tororo
  display:
    position: right
    width: 150
    height: 300
    hOffset: 40
    vOffset: -38
  # 手机是否显示
  mobile:
    show: false
    scale: 0.2
  # 透明度
  react:
    opacityDefault: 0.8
    opacityOnHover: 0.2

参考：

使用Node.js Hexo Github搭建个人博客：https://www.cnblogs.com/wumz/p/8030244.html

使用Hexo、Node.js、Gitee搭建个人博客：https://wxtsy.gitee.io/2020/07/06/blog/搭建博客20200706/

三分钟在GitHub上搭建个人博客：https://zhuanlan.zhihu.com/p/28321740

用github page搭建博客：https://www.zhihu.com/question/59088760

网络安全 https hexo node.js git

0 人点赞