草庐IT

Hexo-零基础搭建个人博客(详解)

〆清峰ㄟ 2023-04-21 原文

Hexo零基础搭建个人博客

Hexo是一个基于 node.js的快速生成静态博客的开源框架,支持 Markdown和大多数 Octopress
插件,一个命令即可部署到 Github页面、 Giteee、 Heroku等,强大的APl,可无限扩展,拥有
数百个主题和插件。

简单来说就是一个不用你写代码,就能搭建一套属于你自己的个人博客网站 应用(零基础小白也会)。

你可以在上面编写文章,做笔记,写日记,码代码。(一个属于你的世界!一个可供别人访问的个人世界)

另外Hero还提供了大量主题模版供用户下载。你的博客网站将可以时不时的换一种主题风格,赏心悦目,简直完美!

一、环境准备

1、安装Node.js

直接到官网上下载安装即可https://nodejs.org/en/download/

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Node自带npm

2、安装Git

  • Windows:下载并安装 git.
  • Mac:使用 Homebrew, MacPorts 或者下载 安装程序
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

npm下载慢的话也可以下载淘宝下载源cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、开始安装Hexo

1、安装hexo

npm install -g hexo-cli
或者
cnpm install -g hexo-cli

安装完成可输入hexo -v查看版本

2、初始化hexo,新建存储博客的文件夹

hexo init myblog

3、进入文件夹,安装一下npm

cd myblog
npm install

可以看到我们的hexo站点就已经安装好了,接下来就可以直接启动他了

4、启动服务站点

hexo g 
hexo server

访问http://localhost:4000/ 至此hero就搭建好了。可以在本地访问了

三、Gitee上建站访问

可在github或者gitee上建站,gitee国内访问快一些

1、新建仓库

格式必须是:用户名+.gitee.io 只有这样,将来要部署到Gite e page的时候,才会被识别,也就是xxxx.gitee.io,其中xxx就是你注册Gitee的用户名。

2、将hexo博客站点上传到gitee上

这里需要安装一个hexo的上传插件deploy-git

npm install hexo-deployer-git --save

3、修改hexo配置文件指定仓库路径

可在文件夹中直接打开文件,也可通过vim直接编辑

找到Deployment加上(注意空格)

deploy:
  type: git
  repo: 你的仓库路径
  branch: master

4、推送hexo站点文件

之后就可以推送博客站点到gitee上了

推送命令
hexo d

扩展:

其中 hexo clean清除了你之前生成的东西,也可以不加。
hexo generate 顾名思义,生成静态文章,可以用 hexo g缩写
hexo deploy 部署文章,可以用hexo d缩写

推送中会要求输入gitee的用户名和密码(如果不想每次都输可以配置ssh,我这里就不做演示了)

然后就可以看到gitee上有推上来的文件了

5、配置Pages服务

目前我们站点还无法访问需要开启Gitee Pages(gitee需要开启,github不需要)

审核通过启动我们就可以访问啦。

gitee上传新文件之后,需要手动更新一下,更新后的页面才会生效

多说一句:如果觉得这个访问路径太长了,我们可以去买一个域名,将该路径绑定到域名上,即可通过域名访问了。

四、GitHub上建站访问

在gitee上建站发现有限制条件,所有也可以采用github建站的方式。

步骤和gitee一样。

1、新建guthub仓库

仓库名称限制了为你的:用户名+.github.io

2、安装hexo上传插件

npm install hexo-deployer-git --save

3、修改hexo配置文件指定仓库路径

可在文件夹中直接打开文件,也可通过vim直接编辑

vim _config.yml #找到Deploymentdeploy:  type: git  repo: 你的github仓库路径  branch: master

4、推送站点到github

推送命令hexo d

推送过程中需要输入你的github用户名和密码。但是在2021年8月14日开始github官方就加强安全访问。不能通过原有账号密码git访问,密码需要用官方的token或者采用ssh公私钥访问。否则会出现下图:鉴权失败(用户名密码错误)

官方原话:

近年来,GitHub 客户受益于 GitHub.com 的许多安全增强功能,例如双因素身份验证、登录警报、经过验证的设备、防止使用泄露密码和 WebAuthn 支持。 这些功能使攻击者更难获取在多个网站上重复使用的密码并使用它来尝试访问您的 GitHub 帐户。 尽管有这些改进,但由于历史原因,未启用双因素身份验证的客户仍能够仅使用其GitHub 用户名和密码继续对 Git 和 API 操作进行身份验证。

从 2021 年 8 月 13 日开始,我们将在对 Git 操作进行身份验证时不再接受帐户密码,并将要求使用基于令牌(token)的身份验证,例如个人访问令牌(针对开发人员)或 OAuth 或 GitHub 应用程序安装令牌(针对集成商) GitHub.com 上所有经过身份验证的 Git 操作。 您也可以继续在您喜欢的地方使用 SSH 密钥

解决方式就是获取token,登录github设置setting->Developer Settings->Prosonal access tokens 创建一个新token。然后就可以拿这个token当密码输入了。

用户名和token输入后,上传成功。

5、尝试访问

输入你的仓库名称,即可访问成功。

https://lindaifeng.github.io/

五、更换主题

博客样式太死板,想换成属于自己的风格,没问题我们可以更换博客的主题,来达到我们想要的风格。

到GitHub上搜索hexo主题或者hero自带的主题https://hexo.io/themes/。

1、找一个喜欢的。

按照各自的主题文档上面一步步操作即可。

一般步骤:

1、下载解压2、放到主题包themes文件夹下面3、在hero配置文件_config.yml中修改为喜欢主题的名字4、hero server启动即可访问

六、更新仓库

本地调试完之后。就可以更新到github上了

//清理hexo clean//构建静态文件hexo g//上传至仓库hexo d

访问:

七、写文章

在站点文件夹中打开 git ,输入如下命令创建文章,其中 我的第一篇博客 为文章的标题。hexo会在source文件夹下创建一个markdowm的文件。这就是你要编写的文章。

Markdown 是一种可以使用普通文本编辑器编写的 标记语言,通过简单的 标记语法,它可以使普通文本内容具有一定的格式

基于 Markdown 语法的简洁性,它已经成为目前世界上最流行的用于书写博客的语言

$ hexo new "我的第一篇博客"

用软件typora打开直接编写文章

在上传更新到github上立马能够查看到。

//清理hexo clean//构建静态文件hexo g//上传至仓库(上传报错多位网络原因,多上传几次即可)hexo d

草稿箱

很多时候我们需要先写成草稿,而暂时不发布出去。draft page就可以满足我们的要求,我们的网站上是看不到草稿文件的。

//新建草稿文件hexo new draft b//预览草稿文件hexo server --draft//发布草稿hexo publish b

八、新建页面

有时我们不满足主题自由的一些页面,希望自己添加一些页面。

我们可以新建页面,新建页面则会在hexo的source中新建该页面文件并生成md文件,这就是你要编辑的博客页了。

hexo new page "resouces"

然后打开主题的配置文件_config.yml,在菜单属性menu中的添加如下(注意不是Hexo的配置文件)

将页面路径联接到页面上去

菜单自定义名称:/生成的页面名称

当我们点击资源时后会跳转到我们自定义的博客页了(该页面不一样是因为我跟换了主题)

至此Hexo的安装,建站,写博客,更新,新建菜单就全部介绍完毕。

有关Hexo-零基础搭建个人博客(详解)的更多相关文章

  1. 物联网MQTT协议详解 - 2

    一、什么是MQTT协议MessageQueuingTelemetryTransport:消息队列遥测传输协议。是一种基于客户端-服务端的发布/订阅模式。与HTTP一样,基于TCP/IP协议之上的通讯协议,提供有序、无损、双向连接,由IBM(蓝色巨人)发布。原理:(1)MQTT协议身份和消息格式有三种身份:发布者(Publish)、代理(Broker)(服务器)、订阅者(Subscribe)。其中,消息的发布者和订阅者都是客户端,消息代理是服务器,消息发布者可以同时是订阅者。MQTT传输的消息分为:主题(Topic)和负载(payload)两部分Topic,可以理解为消息的类型,订阅者订阅(Su

  2. Tcl脚本入门笔记详解(一) - 2

    TCL脚本语言简介•TCL(ToolCommandLanguage)是一种解释执行的脚本语言(ScriptingLanguage),它提供了通用的编程能力:支持变量、过程和控制结构;同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发,脚本编程,GUI和测试等方面。•实际上包含了两个部分:一个语言和一个库。首先,Tcl是一种简单的脚本语言,主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的,因此在某种意义上我们又可以把TCL看作C库,这个库中有丰富的用于扩展TCL命令的C\C++过程和函数,所以,Tcl是

  3. 【详解】Docker安装Elasticsearch7.16.1集群 - 2

    开门见山|拉取镜像dockerpullelasticsearch:7.16.1|配置存放的目录#存放配置文件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/config#存放数据的文件夹mkdir-p/opt/docker/elasticsearch/node-1/data#存放运行日志的文件夹mkdir-p/opt/docker/elasticsearch/node-1/log#存放IK分词插件的文件夹mkdir-p/opt/docker/elasticsearch/node-1/plugins若你使用了moba,直接右键新建即可如上图所示依次类推创建

  4. 【Elasticsearch基础】Elasticsearch索引、文档以及映射操作详解 - 2

    文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚,分别为索引、映射和文档(不用死记硬背,大概有个印象就可以)索引可理解为MySQL数据库;映射可理解为MySQL的表结构;文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了,映射可理解为MySQL的表结构,在MySQL中,向表中插入数据是需要先创建表结构的;但在es中不必这样,可以直接插入文档,es可以根据插入的文档(数据),动态的创建映射(表结构),这就

  5. 最强Http缓存策略之强缓存和协商缓存的详解与应用实例 - 2

    HTTP缓存是指浏览器或者代理服务器将已经请求过的资源保存到本地,以便下次请求时能够直接从缓存中获取资源,从而减少网络请求次数,提高网页的加载速度和用户体验。缓存分为强缓存和协商缓存两种模式。一.强缓存强缓存是指浏览器直接从本地缓存中获取资源,而不需要向web服务器发出网络请求。这是因为浏览器在第一次请求资源时,服务器会在响应头中添加相关缓存的响应头,以表明该资源的缓存策略。常见的强缓存响应头如下所述:Cache-ControlCache-Control响应头是用于控制强制缓存和协商缓存的缓存策略。该响应头中的指令如下:max-age:指定该资源在本地缓存的最长有效时间,以秒为单位。例如:Ca

  6. IDEA 2022 创建 Spring Boot 项目详解 - 2

    如何用IDEA2022创建并初始化一个SpringBoot项目?目录如何用IDEA2022创建并初始化一个SpringBoot项目?0. 环境说明1.  创建SpringBoot项目 2.编写初始化代码0. 环境说明IDEA2022.3.1JDK1.8SpringBoot1.  创建SpringBoot项目        打开IDEA,选择NewProject创建项目。        填写项目名称、项目构建方式、jdk版本,按需要修改项目文件路径等信息。        选择springboot版本以及需要的包,此处只选择了springweb。        此处需特别注意,若你使用的是jdk1

  7. ruby - 在 Middleman 中移动博客文章位置 - 2

    我正在为我的网站使用MiddlemanBloggem,但默认情况下,博客文章似乎需要位于/source中,这在查看vim中的树时并不是特别好并尝试在其中找到其他文件之一(例如模板)。通过查看文档,我看不出是否有任何方法可以移动博客文章,以便将它们存储在其他地方,例如blog_articles文件夹或类似文件夹。这可能吗? 最佳答案 将以下内容放入您的config.rb文件中。activate:blogdo|blog|blog.permalink=":year-:month-:day-:title.html"blog.sources=

  8. 详解Unity中的粒子系统Particle System (二) - 2

    前言上一篇我们简要讲述了粒子系统是什么,如何添加,以及基本模块的介绍,以及对于曲线和颜色编辑器的讲解。从本篇开始,我们将按照模块结构讲解下去,本篇主要讲粒子系统的主模块,该模块主要是控制粒子的初始状态和全局属性的,以下是关于该模块的介绍,请大家指正。目录前言本系列提要一、粒子系统主模块1.阅读前注意事项2.参考图3.参数讲解DurationLoopingPrewarmStartDelayStartLifetimeStartSpeed3DStartSizeStartSize3DStartRotationStartRotationFlipRotationStartColorGravityModif

  9. VMware虚拟机与本地主机进行磁盘共享(详解) - 2

    VMware虚拟机与本地主机进行磁盘共享前提虚拟机版本为Windows10(专业版,不是可能有问题)本地主机为家庭版或学生版(此版本会有问题,但有替代方式)最好是专业版VMware操作1.关闭防火墙,全部关闭。2.打开电脑属性3.点击共享-》高级共享-》权限4.如果没有everyone,就添加权限选择完全控制,然后应用确定。5.打开cmd输入lusrmgr.msc(只有专业版可以打开)如果不是专业版,可以跳过这一步。点击用户-》administrator密码要复杂密码,否则不行。推荐admaiN@1234类型的密码。设置完密码,点击属性,将禁用解开。6.如果虚拟机的windows不是专业版,可

  10. ruby-on-rails - 博客条目和评论的倒序显示,Ruby on Rails - 2

    我是Rails的新手,所以在这里需要一些帮助。我已经按照几个教程创建了一个带有评论甚至一些AJAX花哨功能的博客,我被困在一些我希望很容易的事情上。博客和评论的默认显示是先列出最早的。我如何反转它以在顶部显示最新条目和最新评论。真的不知道这是Controller还是模型的功能。我已经做了一些定制,所以如果有帮助的话,这里是Controller.rb文件的代码。评论ControllerclassCommentsController帖子管理员classPostsController[:index,:show]#GET/posts#GET/posts.xmldefindex@posts=Po

随机推荐