Hexo+Gitee免费搭建静态博客
前言
这是一篇利用 Gitte Pages + hexo 搭建属于自己博客的教程,也是自己这个博客搭建好以后的第一篇文章,搭建的过程中也参考了各路大佬的文章,期间遇到了一些问题,所以写这一篇文章即是记录自己的路程也是为了让小白少走一些弯路。
操作系统:win10
一、环境准备
1、安装Node.js
按需下载相应的版本, 默认安装就可以了。
2、安装Git
按需下载相应的版本, 默认安装就可以了。
3、检测是否安装成功
git --version
node -v
npm -v
(注:提示不是内部或外部命令,记得检查下环境变量)
设备环境:Win10
二、安装Hexo
觉得慢的话可以更换淘宝源:npm install -g cnpm --registry=https://registry.npm.taobao.org
执行安装命令:
npm install -g hexo-cli
这里我出现了一些小问题,hexo安装到了全局的目录,但我的环境有点问题
如果你cmd
查看全局位置:npm root -g
hexo就在这里面,而hexo.cmd在npm目录下,把npm目录添加到环境变量里就解决了
主要目的是找到hexo.cmd,把它放入环境变量就ok了
我的路径:C:\Users\26254\AppData\Roaming\npm
win10打开环境变量:右键此电脑->点击属性->高级系统设置->环境变量->Path,新建一个变量,把路径放进去就ok了
Hexo 初始化配置
初始化命令:hexo init <文件夹>
路径可以自己选择,可以cd到想要存放的的文件夹
我的文件夹名称是blog,名称随意,等待几分钟就会出现一个文件夹
blog文件夹下的目录如下:
解释一下:
- node_modules:是依赖包
- public:存放的是生成的页面
- scaffolds:命令生成文章等的模板
- source:用命令创建的各种文章
- themes:主题
- _config.yml:整个博客的配置
- package.json:项目所需模块项目的配置信息
本地查看效果
首先cd进入blog文件夹
然后执行命令:hexo s
默认是端口4000,也可以用hexo serer -p 3000
直接指定页面显示的端口
这时就可以打开 http://localhost:4000/预览效果了
这时我们已经搭建好了本地的博客
三、将博客部署到 Gitee Pages 上
注册 Gitee 账户
创建项目代码库
安装hexo部署
安装 hexo 部署到 git page 的 deployer:npm install hexo-deployer-git –save
修改 Hexo 工程目录下的配置文件_config.yml
,在文件的最下面,找到deploy
字段,配置成如下形式:
切换到 Hexo 工程目录并生成 Hexo 缓存文件和静态文件
hexo g
部署到 Gitee
hexo d
在 Gitee 上开通/更新 Git Pages 服务
想要让部署的 Hexo 页面对外访问,还需要在 Gitee 上开通 Git Pages 服务。
(注:开通Pages服务需要实名认证)
点击 Git Pages
当你看到如下画面时,博客部署成功
四、在博客上发表文章
博客已经搭建好了,既然有了博客就得写点文章了
找到你的路径项目 \blog\source_posts 中
这里就是我们的文章啦
用编辑器编写文章
md 全称 Markdown, Markdown 是 2004 年由 John Gruberis 设计和开发的纯文本格式的语法,非常的简单实用,常用的标记符号屈指可数,几分钟即可学会, .md 文件可以使用支持 Markdown 语法的编辑器编辑,然后保存文件到 \Hexo\source_posts 文件夹下即可
个人推荐Typora,用起来很舒服
Typora下载链接 提取码:xuan
文章标题,标签,分类,封面图片,摘要等,可以在 Front-matter 里面配置(Front-matter 是文件最上方以 — 分隔的区域,用于指定个别文件的变量,官方文档:https://hexo.io/zh-cn/docs/front-matter ),举个例子:
---
layout: 页面布局(配合主题文档使用)
title: 文章名称
date: 文章日期
comments: 文章是否开启评论
photos: 文章封面图(仅部分主题支持)
tags:
- 文章标签一
- 文章标签二
categories: 文章分类
description: 文章描述,即要在首页显示的摘要(仅部分主题支持)
---
这里是摘要
<!-- more -->
这里是正文
注意:description 和 <!-- more --> 方式显示摘要二选一即可,部分主题不支持description,每个配置英文冒号后面要空一格,不同主题配置有所差异,具体要参考主题文档
当我们用编辑器写好文章后,可以使用以下命令将其推送到服务器上
hexo clean - 清除缓存文件
hexo g - 生成缓存文件
hexo d - 推送到gitte
记住推送了之后要在gitee page中进行更新哦
五、更换主题
现在博客也搭建好了,但感觉不太美观怎么办?那我们就来为自己的博客更换喜欢的主题
从这里选自己喜欢的主题吧:Hexo官方主题专栏
NexT主题安装
NexT扩展性强,所以这里讲一下NexT主题的引用
首先复制下面代码:
git clone https://github.com/next-theme/hexo-theme-next themes/next
然后切换到Hexo站点根目录
执行代码
现在就可以在Hexo站点根目录下的themes看到next主题文件夹啦
引用NexT主题
安装是安装好了,剩下的就是引用了
在Hexo站点根目录下的_config.yml文件找到下面代码
theme就是引用的主题了,把它修改为你想使用的主题
别忘了推送到gitte上
hexo clean - 清除缓存文件
hexo g - 生成缓存文件
hexo d - 推送到gitte
记住推送了之后要在gitee page中进行更新哦
六、参考链接
我的博客
这是我的博客 欢迎参观
Hexo+Gitee免费搭建静态博客的更多相关文章
- Hexo快速搭建静态博客并实现远程VPS自动部署
这篇文章将如何搭建hexo,以及如何通过git webhooks实现远程vps的自动部署 这篇文件适合的条件: 简单的用于个人博客.公司博客展示,hexo的定位是静态博客,要实现动态服务器的功能并不适 ...
- 零基础免费搭建个人博客-hexo+github
使用hexo生成静态博客并架设在免费的github page平台 准备 系统: Window 7 64位 使用软件: Git v1.9.5[下载地址] 百度云 360云盘 访问密码 d269 Git官 ...
- Hexo搭建静态博客踩坑日记(二)
前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...
- Hexo搭建静态博客踩坑日记(一)
前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...
- Hexo+Github/Coding免费搭建个人博客网站
体验更优排版请移步原文:http://blog.kwin.wang/other/hexo-github-build-blog.html 很早之前就想搭建一个属于自己的博客网站,一方面是给自己做笔记,把 ...
- 使用github和hexo搭建静态博客
获得更多资料欢迎进入我的网站或者 csdn或者博客园 终于写这篇文章了,这是我使用github和hexo搭建博客的一些心得,希望能给大家一点帮助.少走点弯路.刚接触github,只是用来存项目的版本, ...
- 在GitHub上使用Hexo搭建静态博客
搭建静态博客须要一个前提是电脑上有安装git而且有github帐号,这个不懂能够看廖雪峰先生的git教程 1.下载nodejs.在官网上能够下载 2.使用git进入你新建的一个目录,输入命令 npm ...
- 使用hexo和coding建立静态博客站点
背景 由于工作性质的原因,做技术的总想记录和分享一下自己的学习和成长历程,向这世界证明我来过.写文章,发博客,一开始使用51cto,广告太多,看起来让人很痛苦:接着试用了博客园,广告少一些,但感觉还是 ...
- 使用Jekyll + GitHub Pages免费搭建个人博客
使用Jekyll + GitHub Pages免费搭建个人博客 My Blog:无名の辈 | VectorX (vectorxxxx.github.io) Download Ruby:Download ...
- 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客
本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...
随机推荐
- js移除style样式
removeAttribute() 例: <button @click="edit" type="button" disabled id="bt ...
- P1600 [NOIP2016 提高组] 天天爱跑步 (树上差分)
对于一条路径,s-t,位于该路径上的观察员能观察到运动员当且仅当以下两种情况成立:(d[ ]表示节点深度) 1.观察员x在s-lca(s,t)上时,满足d[s]=d[x]+w[x]就能观察到,所以我们 ...
- python中的多线程与多进程
线程概念: 线程也叫轻量级进程,是操作系统能够进行运算调度的最小单位,它被包涵在进程之中,是进程中的实际运作单位. 线程自己不拥有系统资源,只拥有一点儿在运行中必不可少的资源,但它可与同属一个进程的其 ...
- <一>关于进程虚拟地址空间区域内存划分和布局
C++代码在编译完成后会生产.exe程序(windows平台), .EXE以文件的形式存储在磁盘上,当运行.exe程序的时候 操作系统会将磁盘上的.exe文件加载到内存中,那么在加载到内存中的时候,操 ...
- Spring MVC(配置、入门)
Spring MVC 框架的模块 什么是Spring的MVC框架? Spring 配备构建Web 应用的全功能MVC框架.Spring可以很便捷地和其他MVC框架集成,如Struts,Spr ...
- 8_vue是如何进行数据代理的
在了解了关于js当中的Object.defineProperty()这个方法后,我们继续对vue当中的数据代理做一个基于现在的解析 建议观看之前先了解下js当中的Obejct.defineProper ...
- python中的字符串学习
# 1.字符串的下标(索引) # 取字符串中的子串 print('1.字符串的下标(索引)') str1 = 'PYTHON' print(str1[0]) print(str1[-4]) # 2.字 ...
- iphoneApp Fidder设置
使用iphone 打开fidder 按照如上配置 安装完毕 然后访问计算机地址- 比如我的计算机ip地址是 192.168.2.10那么我需要在我的safari浏览器中输入192.168.2.10:8 ...
- 常用CSS样式属性
01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...
- ArchLinux安装手册(2022-10-01)
准备工作 镜像下载:北京外国语大学镜像 使用ventoy做启动盘: (1) ventoy下载:github下载地址 (2) 解压运行下载好的ventoy,设备选择准备好的U盘(会清空),然后选择安装即 ...