Github + Hexo 搭建个人博客

2023-10-26

Github + Hexo 搭建个人博客

本文修改自【韦阳】的博客《超详细Hexo+Github博客搭建小白教程》

原文链接:https://godweiyang.com/2018/04/13/hexo-blog/

遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

快速搭建

已经搭建和配置好的模板:https://github.com/zz2summer/blog-hexo-theme-matery.git,下载后,先解压 node_modules.zip,然后删除 .git

如果出现bug,可能是npm版本等问题,可以把 node_moudules 文件删除,重新安装对应模块组件

安装Node.js

官网下载:Node.js

安装直接点击 Next 即可

最后测试是否安装成功:

win + R 打开命令行提示符,输入 cmd,之后输入命令:node -vnpm -v,如果显示版本号即安装成功!

在这里插入图片描述

添加国内镜像源

可以切换使用阿里的国内镜像对 npm 进行加速

# 设置自定义镜像命令
npm config set registry https://registry.npm.taobao.org

# 查看npm源地址
npm config list

# 删除自己设置的镜像命令
npm config rm registry

安装 Git

下载分布式版本管理工具 Git —— 主要用于之后把本地网页部署到 Github 上去

安装选项还是全部默认,只不过最后一步添加路径时选择Use Git from the Windows Command Prompt,这样我们就可以直接在命令提示符里打开git了。

安装完成后在命令提示符中输入git --version验证是否安装成功。

注册 Github

打开https://github.com/,新建一个项目,如下所示:

在这里插入图片描述

然后如下图所示,输入自己的项目名字,后面一定要加.github.io后缀,README初始化也要勾上。名称一定要和你的github名字完全一样,比如你github名字叫abc,那么仓库名字一定要是abc.github.io

在这里插入图片描述

然后项目就建成了,点击Settings,向下拉到最后有个GitHub Pages,点击Choose a theme选择一个主题。然后等一会儿,再回到GitHub Pages,会变成下面这样:

在这里插入图片描述

点击那个链接,就会出现自己的网页啦,效果如下:

在这里插入图片描述

安装Hexo

在合适的地方新建一个文件夹,用来存放自己的博客文件,比如我的博客文件都存放在H:\blog目录下。

在该目录下右键点击Git Bash Here,打开git的控制台窗口,以后我们所有的操作都在git控制台进行,就不要用Windows自带的控制台了。

定位到该目录下,输入npm i hexo-cli -g安装Hexo。会有几个报错,无视它就行。

在这里插入图片描述

安装完后输入hexo -v验证是否安装成功。

在这里插入图片描述

然后就要初始化我们的网站,输入hexo init初始化文件夹,接着输入npm install安装必备的组件。

在这里插入图片描述

在这里插入图片描述

这样本地的网站配置也弄好啦,输入hexo g生成静态网页,然后输入hexo s打开本地服务器,然后浏览器打开http://localhost:4000/,就可以看到我们的博客啦,效果如下:

在这里插入图片描述

ctrl+c关闭本地服务器。

连接Github与本地

首先右键打开git bash,然后输入下面命令:

git config --global user.name "zz2summer"
git config --global user.email "xxxxx@163.com"

用户名和邮箱根据你注册github的信息自行修改。

然后生成密钥SSH key:

ssh-keygen -t rsa -C "summer2zz@163.com"

按照提示直接一路回车即可。

打开 github,在头像下面点击settings,再点击SSH and GPG keys,新建一个SSH,名字随便。

git bash中输入

cat ~/.ssh/id_rsa.pub

将输出的内容复制到新建 SSH的框中,点击确定保存。

输入ssh -T git@github.com,如果如下图所示,出现你的用户名,那就成功了。

在这里插入图片描述

打开博客根目录下的_config.yml文件,这是博客的配置文件,在这里你可以修改与博客相关的各种信息。

修改最后一行的配置:

deploy:
  type: git
  repository: https://github.com/zz2summer/zz2summer.github.io
  branch: master

repository修改为你自己的github项目地址。

写文章、发布文章

首先在博客根目录下右键打开git bash,安装一个扩展npm i hexo-deployer-git

在这里插入图片描述

然后输入hexo new post "article title",新建一篇文章。

在这里插入图片描述

然后打开H:\blog\source\_posts的目录,可以发现下面多了一个article-title.md文件,就是文章文件。

编写完markdown文件后,根目录下输入hexo g生成静态网页,然后输入hexo s可以本地预览效果,最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。

在这里插入图片描述

如果需要上传图片,需要修改配置文件_config.yml来生成。

post_asset_folder: true

这样每次新建文件就会直接生成文章和同名文件夹,图片放到文件夹中再用相对路径引用图片即可。

图片添加水印

为了防止别人抄袭你文章,可以把所有的图片都加上水印,方法很简单。

首先在博客根目录下新建一个watermark.py,代码如下:

# -*- coding: utf-8 -*-
import sys
import glob
from PIL import Image
from PIL import ImageDraw
from PIL import ImageFont


def watermark(post_name):
    if post_name == 'all':
        post_name = '*'
    dir_name = 'source/_posts/' + post_name + '/*'
    for files in glob.glob(dir_name):
        im = Image.open(files)
        if len(im.getbands()) < 3:
            im = im.convert('RGB')
            print(files)
        font = ImageFont.truetype('STSONG.TTF', max(30, int(im.size[1] / 20)))
        draw = ImageDraw.Draw(im)
        text_size_x, text_size_y = draw.textsize(u'@yourname', font=font)
        draw.text((im.size[0] - text_size_x, im.size[1] - text_size_y), u'@yourname', fill=(0, 0, 0, 85), font=font)
        im.save(files)


if __name__ == '__main__':
    if len(sys.argv) == 2:
        watermark(sys.argv[1])
    else:
        print('[usage] <input>')

字体也放根目录下,自己找字体。(win10自带字体文件目录:C:\Windows\Fonts)然后每次写完一篇文章可以运行python watermark.py postname添加水印,如果第一次运行要给所有文章添加水印,可以运行python watermark.py all

如果报错显示:ModuleNotFoundError: No module named 'PIL',意思没有安装对应的 Python 模块,运行命令:pip install Pillow

修改样式

建议参考官方说明文档:hexo-theme-matery/README_CN.md at develop · blinkfox/hexo-theme-matery

详细而且是最新的。

注意区分博客的配置文件和主题的配置文件,基本上把两个配置文件浏览一遍,基本配置就改好了。

文章基本操作

发表文章

# 新建文章
hexo new post "article title"

# 图片加水印
# 单篇文章 postname
python watermark.py postname
# 所有文章
python watermark.py all

# 生成静态页面
hexo g

# 本地预览
hexo s

# 部署到网站
hexo d

修改文章

修改对应文章内容,然后执行命令 hexo d -g 即可。

删除文章

删除目录 source\_posts 下对应文章文件,然后执行命令 hexo d -g 即可。

其他

  1. 多个标签:[标签1,标签2,标签3]
  2. 插入上传图片
    • 将图片放置在在 .md 同级目录下的同名文件夹下,引用时直接写图片名即可,如:![](pic_name.png),部署后该HTML页面和图片位于同级目录
    • 将图片放置在在 source/images 目录下,引用时使用![](/images/pic_name.png)

Hexo 常见操作

# Create a new post
$ hexo new "My New Post"

# Run server
$ hexo server

# Generate static files
$ hexo generate

# Deploy to remote sites
$ hexo deploy

# 清空缓存并生成新的静态页面
hexo clean && hexo g

遇到的问题

因为开了代理,所以连接上可能会出现一些问题

Summer@DESKTOP-NU751AT MINGW64 /h/blog/themes
$ git clone https://github.com/blinkfox/hexo-theme-matery.git
Cloning into 'hexo-theme-matery'...
fatal: unable to access 'https://github.com/blinkfox/hexo-theme-matery.git/': OpenSSL SSL_read: Connection was reset, errno 10054

Summer@DESKTOP-NU751AT MINGW64 /h/blog/themes
$ git config --global http.proxy 127.0.0.1:8580

参考文章

【1】超详细Hexo+Github博客搭建小白教程 | 韦阳的博客

【2】Hexo博客主题之hexo-theme-matery的介绍 | 闪烁之狐

【3】hexo-theme-matery/README_CN.md at develop · blinkfox/hexo-theme-matery

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Github + Hexo 搭建个人博客 的相关文章

随机推荐

  • athas热更新代码

    热更新 热更新有什么用 比如 生产环境有一个逻辑不小心写错了 导致资产损失 如果修改代码 重新发布到生产环境 需要的时间比较长 而且生产环境重启 也可能会影响到其他的用户 热更新 可以不用重启环境 修改代码对应的字节码 达到修改功能的目的
  • bert serving的简单使用(文本向量化)

    不涉及原理 只是快速开始使用 更详细的请参考官方文档 https bert as service readthedocs io en latest index html 文章目录 可用环境 1 下载预训练模型 2 安装python库 3 启
  • python没有main函数也可以_为什么Python没有main函数?,

    为什么Python没有main函数 我为什么也不推荐 毫无疑问 Python中没有所谓的主入口函数 但是互联网上经常有文章提到 Python的Main函数 和 建议编写Main函数 他们的目的可能是模仿真实的主要功能 但是许多人被误导 或误
  • 串的BF和KMP算法匹配

    BF代码 status Index BF SString S SString T int pos pos的作用确定起始查询位置 int i j i pos j 1 while i lt S length j lt T length if S
  • 刷脸支付科技的高速发展改变人们消费观念

    移动支付巨头支付宝及微信先后推出自己的刷脸支付产品 而从发布时间及命名上不难嗅到其中浓浓的火药味儿 而支付宝更是计划投入30亿资金 用于推广刷脸支付市场 在两大巨头竞争互相下 刷脸支付必然会像扫码支付一样得到快速普及 刷脸支付能够如此迅速地
  • BIOS Rootkit:Welcome home,my Lord!

    BIOS RootKit Welcome Home My Lord Author Icelord Contact icelord sohu com Data 2007 04 26 gt 本文介绍一个简单BIOS rootkit的简单设计过程
  • MFC对话框添加菜单栏

    1 解决方案资源管理器 资源文件 rc双击 转至资源视图 2 资源视图 右击 rc 添加资源 Menu 新建 图形化界面编辑 3 图形化编辑完成后 切换到目标对话框的头文件 Dlg h 在类的成员定义处添加一个CMenu变量 比如 4 切换
  • uni-app中scroll-view不触发@scrolltolower事件(某些机型)

    uni app中scroll view不触发 scrolltolower事件 某些机型 背景 uni app中scroll view中用 scrolltolower的时候需要设置lower threshold的值 a 当设置为10的时候 某
  • C#调用C/C++DLL的两种方法

    C 调用C C DLL的两种方法 前言 方法1 常用的DLLImport方法 方法2 CLR封装法 前言 工作中 需要给客户提供公司产品的 NET动态库 但驱动工程师往往只提供C编译的库 这里就需要我做一些中间工作 方便客户使用我们的产品
  • IDEA中 yml文件不提示 和 怎么隐藏springboot 创建的文件隐藏不需要的文件

    1 隐藏你要隐藏的文件 输入文件的名称就可以了 2 duiyml文件不提示的问题 3 对比两个java文件改了什么
  • webpack4 之 splitChunks

    webpack4 之 splitChunks 简介 主要作用是提取公共代码 防止代码被重复打包 拆分过大的js文件 合并零散的js文件 SplitChunks 插件的作用就是通过配置让 Webpack 去帮你提取公共代码 chunks we
  • Js的基础

    js的语法结构 1 js是区分大小写的 var username 张三 var userName 李四 document write username document write userName 2 js的标识符和命名规则 标识符 用来
  • 【hello Linux】线程概念

    目录 1 线程概念的铺设 2 Linux线程概念 2 1 什么是线程 2 2 线程的优点 2 3 线程的缺点 2 4 线程异常 2 5 线程用途 3 Linux进程VS线程 4 Linux线程控制 4 1 POSIX线程库 4 2 创建线程
  • react-router-dom文档

    前言 本来体验下react router的 然后 去react router npm查看 发现了官方的提示如下 这个包为 React Router 提供了核心路由功能 但你可能不想直接安装它 如果您正在编写将在浏览器中运行的应用程序 您应该
  • 四个步骤,教你打造自媒体爆款标题。

    做自媒体的心里应该都会明白一篇文章或者是一个视频中标题的重要性 当然取一个好的标题也是有点难度的 但是不必担心 也会有一定的取标题的技巧 下面小编就跟大家讲讲一些取标题的建议 1 内容拟定好标题 在创作标题的时候还是要以文章的具体内容进行创
  • Android之登录注册——简易版

    今天 我要分享给大家的是Android中常见的一个的登录注册的案例 我这里写的是简易版 如果大家有更精彩的拓展 可以自行发挥哦 运行过程相信大家都已经心知肚明了 所以我在这里就直接发布代码了 其中有不理解的地方大家可以自行百度 也可以互相学
  • Unity 按钮点击生成物体

    1 生成button 2 新建脚本ButtonListener using System Collections using System Collections Generic using UnityEngine using UnityE
  • java运行错误排查汇总

    Jetty排错信息1 Failed startup of context o e j w WebAppContext java lang IllegalStateException Duplicate fragment name 原因及解决
  • Linux -- 构建KVM虚拟化环境

    硬件系统的配置 硬件和BIOS中虚拟化技术的支持是KVM运行的先决条件 在x86 64架构的处理器中 KVM必需的硬件虚拟化扩展分别为 Intel的虚拟化技术 Intel VT 和AMD的AMD V技术 一般在BIOS中 VT的选项通过 A
  • Github + Hexo 搭建个人博客

    文章目录 Github Hexo 搭建个人博客 快速搭建 安装Node js 添加国内镜像源 安装 Git 注册 Github 安装Hexo 连接Github与本地 写文章 发布文章 图片添加水印 修改样式 文章基本操作 发表文章 修改文章