Hexo搭建个人静态博客网站
前言
- 前段时间博客园整改,许多博客无法查看,偶然的机会接触到了许多博客框架,可用来快速搭建一个静态博客网站;最后选择使用hexo,看了不少大佬的教程,觉得挺有意思的,于是也总结了一下自己的搭建步骤,可供大家交流
- 写的不对的地方,欢迎指正哦
前期准备
- 安装nodejs,打开cmd输入node -v,显示版本表示安装成功
- 安装git,打开cmd输入git --version,显示版本表示安装成功
- 拥有一个github账号,没有需要注册:https://github.com/
搭建博客
- 登录自己的github账号,创建一个仓库:GitHub账号名.github.io ,勾选README初始化
- 选择一个默认的主题:Settings > GitHub Pages > Choose a theme,点击GitHub pages自动分配的网址预览
- 安装hexo
//选择一个文件夹作为本地博客,右键 > Git Bash Here
npm i hexo-cli -g //安装Hexo
hexo -v //查看hexo版本
hexo init chniny-blog //新建并初始化一个文件
cd chniny-blog //进入文件夹
npm install //安装所需模块
npm install hexo-deployer-git --save //安装用于写markdown文档的模块
配置主题
- 下载next主题到本地(这里我选择的是next):https://github.com/theme-next/hexo-theme-next
- 解压后,重命名为next,复制到themes文件夹
- 打开hexo根目录的站点配置文件_config.yml,将theme项配置为next
theme: next # 主题
推送到远程仓库
- 配置远程仓库地址
# 站点配置文件
deploy:
type: git # 项与值之间必须存在一个空格
repository: https://github.com/chniny/chniny.github.io.git
branch: main # GitHub创建的仓库默认的分支名
- 推送
# 博客文件根目录右键 > Git Bash Here
hexo c # 清楚缓存
hexo g # 生成静态文件
hexo s # 启动本地服务,浏览器输入http://localhost:4000/可本地预览
hexo d # 推送到远程仓库
# 浏览器输入GitHub pages自动分配的网址查看主题是否设置成功
常用命令
hexo new post "文章名称" # 生成新的md文件
hexo g # 生成静态网页
hexo s # 启动服务器,可本地预览
hexo d # 推送到远程仓库网站主页
npm i hexo-cli -g # 安装Hexo
hexo -v # 查看hexo版本
hexo init # 初始化文件夹
hexo init chniny-blog # 初始化该文件夹没有则会创建
npm install # 安装所需模块
npm i hexo-deployer-git # 安装用于写博客的扩展
npm install hexo-deployer-git --save # 安装hexo部署到git page的deployer
hexo server -p 8080 # 切换服务器端口
hexo new page "pageName" # 新建页面
hexo d -g # 生成部署
hexo s -g # 生成预览
编写博客
- 本地博客根目录右键 > Git Bash Here
hexo new post "my blog" # Hexo\source\_posts目录下生成md文件
# 编写博客
hexo c # 清楚缓存
hexo g # 生成静态文件
hexo s # 可本地预览
hexo d # 推送到远程仓库
- 显示图片
# 站点配置文件打开本地资源管理
post_asset_folder: true
# Git Bash Here > 安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save
hexo n "标题" # 创建新文档时会同时生成对应的文件夹,用于存放图片
# 编写markdown,插入图片
{% asset_img 图片名.jpg 描述 %}
自定义域名
- 可在阿里云购买域名,需要实名认证;购买后解析
- GitHub > Settings > Custom domain > 设置自己的域名(这里我是www.chniny.co)
- 打开本地博客文件夹 > source > 创建CNAME文件,不要后缀 > 先用记事本打开写上www.chniny.co 然后去点文件后缀
- 最后推送
备份
- 例如我的本地博客是在GitPages目录下:D:\GitPages\chniny-blog
- 在GitPages文件夹,右键 > Git Bash Here
git init # 初始化为本地仓库
git add chniny-blog # 添加到暂存区
git commit -m "myblog" # 提交
git remote add origin git@github.com:用户名/仓库名.git # 关联远程仓库
git push <远程主机名> <本地分支名>:<远程分支名> # 推送
详细配置
- hexo主题:https://hexo.io/themes/
- 搭建参考教程:https://zhuanlan.zhihu.com/p/35668237
- 站点配置文件详解:https://blog.csdn.net/zemprogram/article/details/104288872
- 主题优化参考教程:http://yearito.cn/posts/hexo-advanced-settings.html
- 主题优化参考2:https://blog.csdn.net/as480133937/article/details/100138838
- next主题配置文档:http://theme-next.iissnan.com/
Hexo搭建个人静态博客网站的更多相关文章
- github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...
- 使用Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 默认配置就好 1.2 安装node.js 下载:http://nodejs.org/download/ 安装时直接保持默认配置即可. 2. 配置Github 1.1 ...
- github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...
- github+hexo搭建自己的博客网站(一)基础入门
github提供的page,hexo提供的静态博客文档,这样可以搭建一个自己的一个博客网站. 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可 ...
- Hexo搭建Github静态博客
1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...
- 转--利用hexo搭建个人静态博客
引用地址 可谓图文并茂,可以配合 七牛云存储(做图片等文件服务器),搭建好看的个人博客 hexo 官方指导文档 主题 官网教程 问题集锦 简书 http://blog.csdn.net/wx_9624 ...
- 使用hexo搭建github个人博客网站
搭建步骤: 1>Mac或win电脑一台,本文以mac为例. 2>下载安装Git和Node 3>安装hexo 4>注册登录GitHub,创建一个仓库,库名格式为:GitHub用户 ...
- hexo搭建简易的博客网站
0.环境检测 1.系统升级(图形更新) #update-manager 检测状态 2.检测升级(命令更新) #sudo apt update #sudo apt -y dist-upgrade 一.安 ...
- github+hexo搭建自己的博客网站(二)更换主题yilia
开始更换主题,hexo默认的主题是landscape,可以更换为其他的主题yilia主题 详细的可以查看hexo博客的演示:saucxs.github.io 可以查看在github上生成的静态文件:h ...
随机推荐
- 微信小程序云开发-云存储-使用云开发控制台存储文件
一.存储 进入[云开发控制台]>点击[存储].将需要存储的文件通过[上传文件]方式上传上去.或者通过拖拽的方式上传文件. 二.存储文件的类型 可以存储的文件有很多,常见的文件类型包括:word ...
- PHP 多进程下载必应壁纸
手里拿着锤子,看什么都像是钉子 在放假的这几天,断断续续的看了老李关于 PHP 多进程的文章. PHP多进程初探 --- 开篇 PHP多进程初探 --- 孤儿和僵尸 PHP多进程初探 --- 信号 P ...
- 解决VS2017调试卡住的问题
今天用VS2017调试程序时,程序没有按照预期的那样运行到断点处,并且结束调试时会卡很长时间. 那么解决方法是: 1. [Tools]-->[Options]-->[Debugging]- ...
- Python - if 条件控制
注意 本篇图片素材都来自慕课网,因为素材过于优秀,直接拿过来了,加水印只是为了防止整篇文章被搬 前言 程序并非是一成不变的向下执行,有的时候也要根据条件的不同选择不一样的代码,这个时候便用到了分支结构 ...
- ASP.NET Datalist制作显示效果和img的数据库存储
1. 具体实现效果如下图: 2.首先使用datalist控件编辑模板,在属性面板选择RepeatColumns="3" RepeatDirection="Horizont ...
- vue、gulp、webpack踩过的坑和笔记
1.监听流错误 stream-combiner2 2.热更新Browsersync与element冲突,换成gulp-connect 3.gulp-uglify压缩js不能压缩es6 4.使用vue- ...
- CF832D题解
题目传送门 Description 给定一棵树上的三个点 \(a,b,c\),你要制定两条起点和终点都在这三个点中的路径,使得两条路径重叠的节点最多. Solution 感觉我的方法和大众不同,显然是 ...
- 代码部署:使用 nginx 代理到云服务器 ( windows 系统)
在部署之前我们首先要了解什么是nginx,它又可以做什么 Nginx 是高性能的 HTTP 和反向代理的web服务器,处理高并发能力是十分强大的,能经受高负 载的考验,有报告表明能支持高达 50,00 ...
- MapReduce框架原理-OutputFormat工作原理
OutputFormat概述 OutputFormat主要是用来指定MR程序的最终的输出数据格式 . 默认使用的是TextOutputFormat,默认是将数据一行写一条数据,并且把数据放到指定的输出 ...
- Notes about WindowPadX
WindowPadX乃一Autohotkey脚本,具有强大的单/多显示器窗口排布能力且易于配置.有了它,那些Pro版收费的.需要安装的DisplayFusion, MultiMon TaskBar, ...