Github + Hexo 搭建个人博客
文章目录
- Github + Hexo 搭建个人博客
- 快速搭建
- 安装Node.js
- 添加国内镜像源
- 安装 Git
- 注册 Github
- 安装Hexo
- 连接Github与本地
- 写文章、发布文章
- 图片添加水印
- 修改样式
- 文章基本操作
- 发表文章
- 修改文章
- 删除文章
- 其他
- Hexo 常见操作
- 遇到的问题
- 参考文章
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 -v
、npm -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: gitrepository: https://github.com/zz2summer/zz2summer.github.iobranch: 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 ImageFontdef 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,标签2,标签3]
- 插入上传图片
- 将图片放置在在 .md 同级目录下的同名文件夹下,引用时直接写图片名即可,如:
![](pic_name.png)
,部署后该HTML页面和图片位于同级目录 - 将图片放置在在
source/images
目录下,引用时使用![](/images/pic_name.png)
- 将图片放置在在 .md 同级目录下的同名文件夹下,引用时直接写图片名即可,如:
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 10054Summer@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
Github + Hexo 搭建个人博客相关推荐
- GitHub+hexo搭建个人博客(2019新版超详细教程)
GitHub+hexo搭建个人博客详细教程 原文链接 : GitHub+hexo搭建个人博客详细教程 前言 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交信息分享者,随之优秀的信息分享平台也越来 ...
- Linux下使用 github+hexo 搭建个人博客01-hexo搭建
为什么要搭建自己的博客系统? 原因有好几个吧,归类如下: 1.自己搭建博客系统很有成就感,可以自己选定页面风格和页面排版: 2.自己搭建博客系统可以根据自己的需要添加各种插件功能,因此整体上比网上的第 ...
- Github+Hexo搭建个人博客(图文详解)
文章目录 使用Github+hexo搭建个人博客(不会让小伙伴们走弯路) 1. 准备工作:安装两个我们本次所需要使用的软件: 2. 注册Github账号以及建立仓库:[https://github.c ...
- Linux下使用 github+hexo 搭建个人博客04-next主题优化
上篇我们说了 hexo 的优化,针对的站点的优化. 本篇讲解 next 主题的优化,包括:使用语言.前端页面显示宽度.菜单.侧栏.头像.添加或取消动画效果.打赏功能等等. 让页面排版更符合我们所要的功 ...
- Github + Hexo 搭建个人博客超详细教程
Github + Hexo 搭建个人博客超详细教程 本文目录 generated with DocToc 网站搭建 本文目录 1.安装node.js 2.添加国内镜像 3.安装Git 4.注册Gith ...
- github+hexo搭建个人博客(1.简单搭建)
github+hexo搭建个人博客(1.简单搭建) 需要使用的软件,我已经放到自己的百度云盘里,网络不好的同学可以自己下载[百度云链接] 安装git 安装node 安装hexo 本地测试 申请gith ...
- 使用github+hexo搭建静态博客
npm install hexo -g #安装Hexo npm update hexo -g #升级 hexo init #初始化博客 命令简写 hexo n "我的博客" == ...
- GitHub+Hexo 搭建个人博客(一)
什么是Hexo ? Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Heroku上,是搭建博客的首选框架.这里我们选用的是GitHub,你 ...
- github+hexo搭建个人博客
原理:搭建个人的博客使用hexo的博客框架,博客是一个网站,需要连接远程服务器,利用github仓库作为服务器去存储具体的内容. 1 安装git,可以参考我之前的博客. Windows 下载git_小 ...
最新文章
- Elasticsearch在后台启动(Linux)
- Linux运维学习历程-第五天-Linux文件系统与管理
- 行式 Excel 文件比对
- 什么是项目管理?怎么管?(一)
- 《曾国藩传》读书笔记
- 苏嵌//张朋//2018.07.23
- rabbitmq安装rabbitmq_delayed_message_exchange插件
- 2021-12-19 老杨博客推荐\TCP像串口的多程编写的一个弱鸡版本类MQTT的TCP实现\字典值查键\微PYTHON与PYTHON的JSON区别\以及一个ESP32领导多个ESP8266组网模式
- 萨摩耶数科林建明:坚守“终局思维” 让金融科技发展行稳致远
- 606.根据二叉树创建字符串
- 基于Spark的用户行为分析系统
- 批处理文件的@echo off是什么意思?
- RSD高程产品(DEM/DSM)的几个精度问题
- NLP模型开发平台在舆情分析中的设计和实践
- BZOJ 2434 NOI2011阿狸的打字机 AC自动机+树状数组
- 数据治理之安装DSS和LINKIS,QUALITIS过程中遇到的问题汇总
- vivo手机的便签批量导出到huawei手机备忘录
- 深度学习笔记(十四)—— 超参数优化[Hyperparameter Optimization]
- 学术工具-文献引文分析利器之 HistCite
- 开放合作,共赢未来 | 福昕鲲鹏加入金兰组织