Hexo个人博客搭建教程
Hexo个人博客搭建教程
1 搭建前准备
1.1 环境配置
需要安装git、node,最后安装hexo
1.1.1 安装Git:
首先看电脑是否已经安装了git
$ git
若提示not founded则进行安装
#未安装homebrew则先安装homebrew
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"#安装git
$ brew install git
查看git版本
$ git --version
显示如下则安装成功
fanziqi@macbook-pro blog % git --version
git version 2.21.0 (Apple Git-122)
1.1.2 安装node
点击访问 node官网 下载安装
查看node版本
$ git --version
1.1.3 安装并配置Hexo
安装hexo
$ sudo npm install -g hexo-cli
创建blog文件夹
# 此目录可以任意更改
$ mkdir blog
# 进入blog文件夹
$ cd blog
# init初始化hexo
$ hexo init
开启本地服务
# hexo s
若出现
INFO Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.
则在浏览器输入 http://localhost:4000 即可看到本地运行的博客首页
1.2 注册并创建仓库
这里讲解两个仓库
1.2.1 GitHub仓库
进入GitHub官网注册一个账号,并记住用户名,下一步要用到
新建一个仓库,点击new repository
进入这一步,仓库名字必须是用户名.github.io,然后点击创建
配置ssh key
$ cd .ssh
新建ssh key
$ ssh-keygen -t rsa -C "你的邮件地址"
出现
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/fanziqi/.ssh/id_rsa):
则输入ssh的名字,比如GitHub,然后回车
再连续按两次回车,最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\刚刚起的名字.pub
文件,打开并复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:
粘贴到key里面,title任意,点击保存。
测试是否成功
$ ssh -T git@github.com
提示 Are you sure you want to continue connecting (yes/no)?
输入yes,提示
You’ve successfully authenticated, but GitHub does not provide shell access.
则配置成功
1.2.2 Coding仓库
由于GitHub服务器在国外,访问速度非常慢。所以建议使用国内的Coding
进入coding官网,点击免费注册
注册成功后新建一个代码托管项目,名称是用户名,并勾选readme
进入代码仓库,点击左下角项目设置–项目与成员–功能开关–打开持续部署
进入项目–持续部署–静态网站
填好名称后并保存
经测试,coding使用ssh公钥无法上传代码,则通过普通的输入用户名密码的方法上传。
1.3 关联到仓库
在创建的blog文件夹里找到_config.yml文件并打开,在文档最后找到
deploy:type: gitrepo:
将其修改为
deploy:type: gitrepo: github:git@github.com:你的GitHub账号/你的GitHub账号.github.io.gitcoding:https://e.coding.net/你的coding账号/你的coding账号/你的coding账号.git#git@e.coding.net:fanis/fanis/fanis.git 此方法暂时不好用branch: master
然后执行
#产生静态网页
$ hexo g
# 部署到GitHub/coding上
$ hexo d#也可使用hexo g && hexo d
进入http://你的名字.github.io/
或http://coding静态网站中的一串代码.coding-pages.com/
即可看到hexo博客
1.4 绑定个人域名
如果想使用自己购买的域名进行访问,则需要将个人域名cname解析到你的名字.github.io/
或coding静态网站中的一串代码.coding-pages.com/
上
1.4.1 域名配置
我的域名购买于阿里云,别的域名注册商大同小异。
打开域名解析页面
天价一个CNAME类型的解析,解析到coding或GitHub上
然后在blog/source/文件夹下创建一个名为CNAME文件,不要后缀。写上你的域名。
注意⚠️国内访问GitHub很慢,如果想达到分流的效果在解析的时候GitHub解析线路选择境外,coding选择境内,即可实现国外用户访问GitHub而国内用户访问coding。
1.4.2 GitHub设置
登录GitHub,进入之前创建的仓库,点击settings,设置Custom domain,输入你的域名
1.4.3 coding设置
进入项目,点击持续部署下的静态网站,设置之前创建的静态网站,下拉找到自定义域名,绑定自己的域名,并获取证书
1.4.4 配置CNAME文件
在blog/source/中创建一个名为CNAME文件,不要后缀。写上你的域名。
最后重新生成静态网站并上传,就可以通过访问自己的域名来访问GitHub/coding上的blog了
$ hexo clean
$ hexo g
$ hexo d
2 使用博客
2.1 基本配置
hexo最主要的配置是_config.yml这个文件,详细可参考官方的配置描述。这里举几个常用的例子
# Site
title: #网页标题
author: #作者名字
language: zh-CN #修改网页语言为英文
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://你的网站
2.2 更换主题
默认的主题很丑,hexo官方主题页这里的主题都可以更换。我选的是butterfly主题,界面美观功能强大。
2.2.1 安装主题
$ cd blog
$ git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
应用主题
修改站點配置文件_config.yml,把主題改為butterfly
theme: butterfly
安装pub渲染器
$ sudo npm install hexo-renderer-pug hexo-renderer-stylus --save
2.2.2 配置主题
为了主題的平滑升級, Butterfly 使用了 data files 特性。
推薦把主題默認的配置文件_config.yml複製到 Hexo 工作目錄下的source/_data/butterfly.yml,如果source/_data的目錄不存在那就創建一個。
打开source/_data/butterfly.yml
首先汉化导航栏,更改将第一段代码更改为
menu:首页: / || fas fa-home时间轴: /archives/ || fas fa-archive标签: /tags/ || fas fa-tags分类: /categories/ || fas fa-folder-open菜单||fas fa-list:- 音乐 || /music/ || fas fa-music- 电影 || /movies/ || fas fa-video留言板: /messageboard/ || fa fa-paper-plane友链: /link/ || fas fa-link关于: /about/ || fas fa-heart
创建标签页
$ hexo new page tags
找到source/tags/index.md这个文件,修改为
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
---
创建分类页
$ hexo new page categories
找到source/categories/index.md这个文件,修改为
---
title: 分类
date: 2018-01-05 00:00:00
type: "categories"
---
创建友情链接页
$ hexo new page link
找到source/link/index.md这个文件,修改为
---
title: 友情链接
date: 2018-01-05 00:00:00
type: "link"
---
添加友情链接
在Hexo博客目錄中的source/_data,創建一個文件link.yml
内容如下
class:class_name: 友情链接link_list:1:name: ZSTU #这里举一个例子link: http://www.zstu.edu.cn/avatar: http://www.zstu.edu.cn//avatar.pngdescr: 浙江理工大学官网
# 2:
# name: xxxxxx
# link: https://www.xxxxxxcn/
# avatar: https://xxxxx/avatar.png
# descr: xxxxxxx
注:class_name和class_desc支持html格式書寫,如不需要,也可以留空。
音乐页使用插件hexo-tag-aplayer,电影页使用插件hexo-douban,请自行查看网页上的使用说明,这里不再赘述。
404页面
# A simple 404 page
error_404:enable: truesubtitle: "頁面沒有找到"background:
代码
代码高亮主题
Butterfly 支持6種代碼高亮樣式:
- default
- darker
- pale night
- light
- ocean
- mac
修改highlight_theme: light
即可
default:
darker:
pale night:
light:
ocean:
mac:
代码复制功能
highlight_copy: true
代碼框展開/關閉
在默認情況下,代碼框自動展開,可設置是否所有代碼框都關閉狀態,點擊>可展開代碼
- true 全部代碼框不展開,需點擊>打開
- false 代碼狂展開,有>點擊按鈕
- none 不顯示>按鈕
highlight_shrink: true #代碼框不展開,需點擊 '>' 打開
社交图标
# social settings (社交圖標設置)
# formal:
# icon: link || the description
social:fab fa-github: https://github.com/fanziqi614 || Githubfas fa-envelope: mailto:fzq614@qq.com || Email
这会展示在主页头像下面
顶部图
# the banner image of home page 将路径填到这里
index_img:# if the banner of page not setting,it will show the top_img
default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg
文档封面
修改position即可改变封面位置
cover:# display the cover or not (是否顯示文章封面)index_enable: trueaside_enable: truearchives_enable: true# the position of cover in home page (封面顯示的位置)# left/right/bothposition: left# When cover is not set, the default cover is displayed (當沒有設置cover時,默認的封面顯示)default_cover:
# - https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg
文章版权
post_copyright:enable: truedecode: falselicense: CC BY-NC-SA 4.0license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
打赏功能
在文末显示
在/blog/themes/butterfly/source/下创建wechat.jpg和alipay.jpg收款码图片
然后更改butterfly代码
# Sponsor/reward
reward:enable: trueQR_code:- img: /img/wechat.jpglink:text: wechat- img: /img/alipay.jpglink:text: alipay
头像
在/blog/themes/butterfly/source/下创建avatar.png作为头像
vatar:img: /img/avatar.pngeffect: true # 頭像會一直轉圈
评论系统
我选择的是valine评论系统,更加美观大方,易于管理。
进入https://leancloud.cn/,注册账号实名认证验证邮箱,创建应用
在设置中记下应用keys
填到下面的对应位置,并修改enable为true
# valine
# https://valine.js.org
valine:enable: true # if you want use valine,please set this value is trueappId: # leancloud application app idappKey: # leancloud application app keypageSize: 10 # comment list page sizeavatar: monsterid # gravatar style https://valine.js.org/#/avatarlang: zh-CN # i18n: zh-CN/zh-TW/en/japlaceholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )guest_info: nick #valine comment header info (nick/mail/link)recordIP: true # Record reviewer IPserverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)bg: # valine backgroundemojiCDN: # emoji CDNenableQQ: false # enable the Nickname box to automatically get QQ Nickname and QQ AvatarrequiredFields: nick # required fields (nick/mail)count: true # dispaly comment count in top_img
注意⚠️guest_info:和requiredFields:一定要对应,否则无法发送评论。
侧边栏设置
可自行设置应用的开关
aside:enable: truemobile: true # 手機頁面( 顯示寬度 < 768px )是否顯示aside內容position: right # left or rightcard_author:enable: truedescription:card_announcement:enable: truecontent: This is my Blogcard_recent_post:enable: truelimit: 5 # if set 0 will show allcard_categories:enable: truelimit: 8 # if set 0 will show allexpand: none # none/true/falsecard_tags:enable: truelimit: 40 # if set 0 will show allcolor: falsecard_archives:enable: truetype: monthly # yearly or monthlyformat: MMMM YYYY # eg: YYYY年MM月order: -1 # Sort of order. 1, asc for ascending; -1, desc for descendinglimit: 8 # if set 0 will show allcard_webinfo: true
动画效果
# Background effects (背景特效)
# --------------------------------------# canvas_ribbon (靜止彩帶背景)
# See: https://github.com/hustcc/ribbon.js
canvas_ribbon:enable: falsesize: 150alpha: 0.6zIndex: -1click_to_change: truemobile: true# Dynamic ribbon (動態彩帶)
canvas_ribbon_piao:enable: truemobile: false# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:enable: falsecolor: '0,0,255' #color of lines, default: '0,0,0'; RGB values: (R,G,B).(note: use ',' to separate.)opacity: 0.7 # the opacity of line (0~1), default: 0.5.zIndex: -1 # z-index property of the background, default: -1.count: 99 # the number of lines, default: 99.mobile: false
2.3 创建新博客
在_config.yml配置文件中,修改为 post_asset_folder: true, 然后新建一篇文章
$ hexo new post "文件名"
这个时候source下会出现一个.md文件和 同名文件夹
用typora等md编辑器即可编辑,图片放在同名文件夹中。
打开md文件,Front-matter 是檔案最上方以 — 分隔的區域,用於指定個別檔案的變數。
---
title:
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
auto_open:
copyright:
mathjax:
katex:
aplayer:
highlight_shrink:
---
参数用法:
文章写在Front-matter下方
写好后
$ hexo g %% hexo d
即可在网站上看到
3 hexo常用命令
hexo n "我的博客" == hexo new "我的博客" #新建⽂章
hexo p == hexo publish
hexo g == hexo generate#⽣成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署hexo server #Hexo 会监视⽂件变动并⾃动更新,您⽆须重启服务器。
hexo server -s #静态模式
hexo server -p 5000 #更改端⼝
hexo server -i 192.168.1.1 #⾃定义 IP
hexo clean #清除缓存 ⽹⻚正常情况下可以忽略此条命令
hexo g #⽣成静态⽹⻚
hexo d #开始部署hexo generate #使⽤ Hexo ⽣成静态⽂件快速⽽且简单
hexo generate --watch #监视⽂件变动两个命令的作⽤是相同的
hexo generate --deploy
hexo deploy --generatehexo new "postName" #新建⽂章
hexo new page "pageName" #新建⻚⾯
hexo generate #⽣成静态⻚⾯⾄public⽬录
hexo server #开启预览访问端⼝(默认端⼝4000,'ctrl + c'关闭server)
hexo deploy #将.deploy⽬录部署到GitHub
hexo new [layout] <title>
hexo new photo "My Gallery"
hexo new "Hello World" --lang tw
祝建站成功~
Hexo个人博客搭建教程相关推荐
- hexo个人博客搭建
title: hexo个人博客搭建 date: 2020-10-14 21:06:50 tags: 随笔 copyright: false hexo个人博客搭建过程 安装软件 git nodejs t ...
- hexo+GitHub博客搭建实战
我的个人博客链接:wangwlj.com 想要搭建类似的博客吗? 如果是,那就赶快点进来吧-- 手把手教学,现在开始!! PS: 将会在个人博客持续更新,本文链接:hexo+GitHub博客搭建实战. ...
- Typecho博客搭建教程
目录 Typecho博客搭建教程 一.搭建博客前的准备工作 1.购买阿里云轻量应用服务器 2.安装宝塔面板 3.域名 二.Typecho下载及安装 1.下载Typecho: 2.上传网站到服务器 3. ...
- 【个人博客】Hexo个人博客搭建与配置详细教程 + Fluid主题 + Gitee发布
文章目录 一.环境准备 1.1 安装 NodeJs 1.2 安装 Git 1.3 安装 Hexo 二.Gitee仓库搭建 2.1 Gitee账号注册 2.2 仓库搭建 三.Hexo博客搭建 3.1 基 ...
- 【效率为王】超详细 Hexo + Github Pages 博客搭建教程
前言 现在市面上已经有许多博客了,比如 CSDN.掘金.博客园.简书等等.我们可以直接在上面发表内容,而且交互比较人性化,而且也能被搜索引擎检索到.但是总归是别人的平台,经常会受限,因此我们就希望能有 ...
- Github+Hexo+matery博客搭建
文章目录 前言 主题介绍 一.博客环境搭建 1. 下载Git和Node.js 1.1 Node.js的安装与配置 1.2 Git的安装与配置 二.Github注册以及Github Pages创建 三. ...
- Hexo个人博客搭建历程
环境配置 Github的创建和配置 安装Git 安装Node.js 安装Hexo Hexo主题设置 主题1:stun 安装 使用 更新 本地效果 主题优化 主题2:black-blue 安装 使用 更 ...
- 个人网站搭建 03——Hexo + Github 博客搭建
使用 Github Pages 服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话根 ...
- 超详细Hexo博客搭建教程
Hexo建站指南 博客是一个展示自己技能和能力的平台,有很多人想要建立自己的博客,折腾来折腾去的,最后却只能在博客园或简书上发表文章. 有很多人选择把博客建在Github上,这是一个开源代码托管网站, ...
最新文章
- 最新:2021年度U.S.News美国大学排名发布,哈佛不是第一!
- 读完这本书,我做了一个APP
- 第四次人口普查数据_第七次人口普查预估:单身男性比女性多3000万?你在其中吗?...
- Eclipse相关问题总结
- jfoenix jdk8 pom依赖
- svnsync实现版本库的同步备份
- get\post常用参数使用说明
- 【python】-- Socket接收大数据
- centos7 mysql
- 九九乘法表(Java)
- php生成excel带图片格式,php导出excel单元格带图片显示方法
- FastStone Capture屏幕长截图
- osx php mongodb,Mac OSX 平台安装 MongoDB
- 应届生实习需要注意哪些方面?
- 6种方法轻松将PDF转换为Word文档,办公必备!
- 使用Free Spire.Doc for Java 处理word文档换行
- mysql的四大常用语句_SQL四大基本语句
- 深圳入户体检报告查询
- python libusb_libusb介绍和使用示例
- 音乐及游戏爱好者的福利,小鹏P7上新网易云及阴阳师,赶快看看吧
热门文章
- selenium实现高校班级打卡-石墨文档每日一报自动化
- 配置文件App.config 生成和调用的两种方式
- instandceof
- 节点本地范围和链路本地范围_802.11协议精读15:链路模型(基于Free-Space Path Loss)...
- Sequence-to-Sequence Model (Seq2Seq)
- 2018世界人工智能蓝皮书:看中国到底有多强!
- 颜色的前世今生9·HSV色彩空间之父——匠白光
- java即时通讯源码 IM即时通讯源码 IM源码 安卓苹果原生APP源码 带音视频
- 零基础学习ORB-SLAM2特征点提取-从原理到源码【李哈哈】
- 有python专业的世界大学_2020年QS计算机专业排名进入世界前50的,除了G5,还有这所大学!...