快速搭建个人博客网站——Hexo
目录
Hexo
安装步骤流程
Hexo主题介绍
我现在使用的主题为Butterfly
博客的编写
GitHub
上传文件到Github
配置静态站点
从csdn迁移博客到hexo
Hexo
hexo是一款快速、简洁且高效的博客框架,Hexo 使用MarkDown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
- 超快速度
- Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
- 支持 Markdown
- Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
- 一键部署
- 只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
- 插件和可扩展性
- 强大的 API 带来无限的可能,与数种模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)轻易集成
安装步骤流程
我使用VS code工具,先创建一个文件夹Hexo,然后打开终端。
使用前可以先看看git环境是否配置完成,命令是:git --version
之后使用npm install hexo-cli -g 对hexo进行全局安装,可以使用hexo --version或者hexo -v去查看是否安装完成
然后使用hexo init进行初始化配置,这一步是为了把hexo从GitHub中克隆到新建出来的Hexo文件夹当中。
之后使用npm install对一些需要补充的包进行下载,这一步需要下载的包并不多。
现在最基本的hexo就已经搭建好了,可以使用hexo server命令去运行,默认的端口号是4000,如果端口号被占用了,可以去关闭该端口号或者 hexo server -p 5000 命令来指定端口。
网页运行的效果:
可以使用hexo g命令去生成静态网站文件,这些静态文件将会生成在public文件夹下面,与vue cli相类似,vue cli进行npm run build打包之后也会生成静态文件在public中。
hexo s命令则是属于本地服务器预览命令
hexo d命令可以将文件发布到git
Hexo主题介绍
hexo博客中有很多主题,在Hexo的官网中,对于博客主题就存在306种主题。
你可以去找到一个适合自己的主题,然后去点击主题名进入GitHub当中。然后一般会给你提供git克隆命令
比如Nexmoe主题
使用教程地址:https://docs.nexmoe.com/hexo-nexmoe/start
我现在使用的主题为Butterfly
可以参考API文档:
https://www.lucfzy.com/2020/02/butterfly-theme/#代码复制
https://jerryc.me/posts/4aa8abbe/#%E5%81%B4%E9%82%8A%E6%8E%92%E7%89%88
将网页的文字设置成为中文简体
站点配置文件_config.yml 是 hexo 工作目录下的主配置文件
butterfly.yml 是 Butterfly 的配置文件。它需要你手动将主题目录下的_config.yml 文件复製到 hexo 工作目录的 source/_data/butterfly.yml 中。如果文件或者文件夹不存在,需要手动创建。
语言
修改站点配置文件 _config.yml
默认语言是 en
主题支持三种语言
- default(en)
- zh-CN (简体中文)
- zh-TW (繁体中文)
效果:
关于页面右上方导航栏的更改可以在主题文件的_config.yml中更改menu
效果:
其他部分的更改都可以去查看参考文档:https://jerryc.me/posts/4aa8abbe/#%E8%AA%9E%E8%A8%80
博客的编写
在hexo中的博客是通过markdown的形式进行编写的,你可以自己去下载markdown文件编辑器,也可以直接在VS code中进行编辑,这些博客都存放在根目录source文件夹的_post文件夹下
---
title: links
date: 2020/5/3 20:46:25
layout: py
permalink: PY.html
cover: https://i.loli.net/2019/07/21/5d33d5dc1531213134.png
coverWidth: 1200
coverHeight: 750
hide_copyright: true
categories:
- 测试
tags:
- 测试
- links
---
GitHub
部署项目到GitHub中
先创建一个GitHub仓库new repository,这是在GitHub中右上角点击+号
在这里给仓库取名时,最好将仓库设置成为以下格式
username.github.io
这里的username可以使用GitHub名字
在Hexo文件夹的终端中输入
ssh-keygen -t rsa
可以进行公钥的配置
在C盘/用户/用户名/.ssh目录下找到id_rsa.pub文件,用文本编辑工具打开,并复制所有文本内容。
在Github页面右上角,点击用户头像-Settings-SSH and GPG keys-New SSH key
Title可以随意填写,Key需要填写刚才复制的公钥文本内容。
添加完成后,在控制台输入:
ssh -T git@github.com
如果配置成功,可以看到成功的回复。
如果提示Are you sure you want to continue connecting (yes/no)?
,输入yes,然后会看到:
上传文件到Github
配置根目录下_config.yml中的repo信息
比如
deploy:type: gitrepository: git@github.com:liuxianan/liuxianan.github.io.gitbranch: master
直接通过hexo来发布到github,还需要安装一个插件:
npm install hexo-deployer-git --save
之后通过hexo d命令进行发布即可
此时重新刷新GitHub仓库即可看到文件已经上传
配置静态站点
点击Settings,进入GitHub Pages配置,由于之前新建仓库的时候,仓库名为username.github.io,github已经自己为我们发布了静态的页面。如果不是username.github.io的格式,则需要手动配置。
可以对网站进行访问了 https://kongchengji.github.io/
从csdn迁移博客到hexo
https://github.com/flytam/CsdnSyncHexo
一起学习,一起进步 -.- ,如有错误,可以发评论
快速搭建个人博客网站——Hexo相关推荐
- 使用Hexo+github+netlify快速搭建个人博客网站
1 写在开头 倒腾了好几天,算是做出了一个有点样子的个人博客网站.便学各位大佬也写一个搭建教程,总结一下个人踩坑经验,也希望能对他人略有作用. 博客演示(欢迎来留言交流) 为什么选择Hexo?答: ...
- 如何快速搭建个人博客网站(详解)
首先,要有一个github账号,可以去这里注册,英语不好的最好用谷歌浏览器把网页翻译出来.(反正我是用的谷歌) 依次填写用户名,邮箱,密码,然后通过邮箱去验证,注册成功后就可以登陆了. 然后我们还需要 ...
- 从零到一快速搭建个人博客网站(域名备案 + https免费证书)
作者:yangwqonly cnblogs.com/winkin/p/14135677.html 前言 为什么选择搭建个人博客?一方面是各个平台经常下架原创文章,另一个方面是为了熟悉整个建站流程. 通 ...
- 用Docker快速搭建一个博客网站,很简单的嘛~
Halo 是一款现代化的个人独立博客系统,给习惯写博客的同学多一个选择. 官网地址:https://halo.run/ 目录 一.准备工作 二.部署流程 (1)创建工作目录 (2)下载配置文件到工作目 ...
- 巨杉Tech | 十分钟快速搭建 Wordpress 博客系统
介绍 很多互联网应用程序开发人员第一个接触到的网站项目就是博客系统.而全球使用最广的Wordpress常常被用户用来快速搭建个人博客网站.默认情况下,Wordpress一般在后台使用MySQL关系型数 ...
- 如何使用Github+Hexo快速搭建个人博客
如何使用Github+Hexo快速搭建个人博客 可以移步地址:https://zyt505050.gitee.io/2019/01/27/ru-he-shi-yong-github-hexo-kuai ...
- GitHub Pages + Hexo搭建个人博客网站,史上最全教程
文章目录 一.准备工作 1. GitHub账号 2. 安装Git 3. 安装NodeJS 二.创建仓库 三.安装Hexo 四.更换主题 1. NexT 主题 2. Fluid主题 五.创建文章 六.个 ...
- Hexo+GitHubPages搭建个人博客网站
Hexo 是一个静态网站生成器,GitHub Pages 可以免费帮我们托管静态网站,本文主要介绍如何结合两者搭建一个博客网站. 官网:https://hexo.io/zh-cn/ Hexo 介绍 H ...
- hexo+github搭建个人博客网站问题汇总和解决办法
分享B站教程:[2021最新版]保姆级Hexo+github搭建个人博客_哔哩哔哩_bilibili 本人在使用hexo + github搭建个人博客网站的过程中也是一步一个bug做过来,几乎每一步都 ...
最新文章
- Android Scroller简单用法
- Scrapy框架的使用之Scrapy对接Selenium
- 再见乱码:5分钟读懂MySQL字符集设置
- 学习旧岛小程序 (4)封装api 请求
- 点击链接,执行.py脚本,cgi脚本,浏览器中没有显示解析后的web页面,而是.py文件本身的代码内容...
- Fread 和fwrite的参数不同,返回值不同
- word之八大文本替换技巧
- Spring Boot: SimpleCacheConfiguration
- jQuery使用示例详解
- 【原创】ABAP根据文件路径获取文件所在目录
- Android数据的几种存储方式---------SharePreferences(轻量的以键值对) 的使用
- WEB前端助手FeHelper|前端人员的神器
- 那些年我们一起追寻过的考研(华科计算机)
- mysql外联多表查询
- python如何判断tcp异常断开_TCP socket如何判断连接断开
- 在线手写汉字识别工具
- 使用hutool-poi在未安装Office或wps软件的电脑中生成Excel的xls后缀消失问题
- 亚马逊平台还收费吗?收费多少?
- 微前端 - qiankun
- slice,splice,substring,split
热门文章
- smartGit系列之长期使用批处理脚本
- 【转】XenServer错误恢复:断电网卡丢失.虚拟机(VPS)不见
- mysql root密码过期了_MYSQL 密码过期解决办法
- hexo搭建github.io博客
- 电路板中的常见电子元器件种类汇总
- Spring +mybatisplus+shiro权限管理集成整合
- MTCNN中celebA数据集的处理(一个置信度,两个坐标点)
- mysql数据库 笔试题
- opencart seo优化_OpenCart商品与目录页标题SEO优化
- involution理解