2019全新记录:Github+Hexo搭建个人博客之逐步指南(Win10系统)

hexo简单部署(一次解决hexo测试+上传github问题) hexo本地测试+上传一次解决 阅读详情

前言

之所以要记录,是因为好记性不如烂笔头,我记性不好,容易忘……

之所以要用Hexo,是因为它对新手很友好,很容易上手,并且对于有markdown写作习惯的同学来说,简直就是一款记录知识/成长/心得日志的一大利器。并且,随着后期个人水平的逐渐提高,学着自己做一个Hexo主题,也是一件很值得深入探索的有趣事儿。

不多说,直接上手开始……

安装前的准备

下载Node.js和Git

直接从官网下载,Node.js,选项默认,直接安装,Git,也是默认直接安装。

直接用安装包安装会省去很多麻烦。
安装完成后在“命令提示符”中输入node -vnpm -v会看到版本号。

部署GitHub仓库

在GitHub的New repository中建立一个“你的注册名.github.io”的仓库,默认设置就行。比如我的“QuiteZeal.github.io”

上传SSH密钥,方便每一次的推送

桌面位置右击,打开“Git Bash Here”,输入:

git config --global user.name "你的GitHub注册名"
# 回车,再输入
git config --global user.email "你的Github注册邮箱"

接着生成SSH密钥文件:

ssh-keygen -t rsa -C "你的GitHub注册邮箱"
# 什么都不要输入,三个回车就好。

然后在生成的信息中,找到生成的文件,id_ras.pub,用文本文档打开,推荐使用Notepad++,全部复制后,到GitHub的设置界面SSH and GPG keys,New一个SSH key即可,(Title随意,内容复制)

然后在Git Bash中输入:ssh git@github.com

如果出现PTY allocation request failed on channel 0……则说明到这一步,暂时都没问题。

一切就绪,Hexo由此开始

安装Hexo框架,这一次先想好自己的Hexo要安装在哪里,比如可以建一个文件夹,然后Hexo就安装在这,注意下面的步骤:

打开管理员模式下的“命令提示符”(可以从Windows系统工具中找到,右键更多里有“管理员模式”),然后切换到自己创建的文件位置,切换到D盘直接输入D:,进入文件夹,用cd “文件名”。

然后输入:

npm install -g hexo-cil # 进行全局安装

(如果是卸载,就是npm uninstall hexo-cli -g,并且,如果要重新安装,那么还要手动删除文件夹里的hexo文件)
如果出现WARN的警告,没有关系,继续就行,初始化博客:

hexo init # 迁移到自己创建的文件夹里

成功后会出现“Start blogging with Hexo!”的字样。

测试“我的第一篇博客”

可以直接输入(记得要加双引号):

hexo new "This is my first blog here" # 创建一篇新博文
hexo g # hexo generate 生成静态文件的缩写
hexo s # hexo server 运行服务的缩写

如果很不幸,你跟我一样出现了这样一堆很心烦的报错……

hexo g
Usage: hexo <command>

Commands:
  help     Get help on a command.
  init     Create a new Hexo folder.
  version  Display version information.

Global Options:
  --config  Specify config file instead of using _config.yml
  --cwd     Specify the CWD
  --debug   Display all verbose messages in the terminal
  --draft   Display draft posts
  --safe    Disable all plugins and scripts
  --silent  Hide output on console

For more help, you can use 'hexo help [command]' for the detailed information
or you can check the docs: http://hexo.io/docs/

我的方法是,卸载了重新安装,记得hexo文件也要手动删除。然后再继续就好。不过这里一定要记录一下出现这种状况的原因所在:

原因是没有在hexo的目录下执行操作,因为我在迁移的过程中不小心又生成了一个文件,也就是hexo init 后面多加了一个文件名,这是不需要的!!

我重新安装后没有生成直接新页面,是先尝试了一下hexo ghexo s是否可行然后的再继续的。

记得每一次新的文章加入后,都需要部署后开启服务,即hexo ghexo s(本地调式是这样。)

直到最后出现这样的字样:

INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

说明我们成功啦,但是可不要在命令栏下CTRL+C呀,因为这是中止操作。(我是一开始总习惯性地犯这个错,最后不还是手动输入哒,哈哈哈哈)

聊一聊关于Hexo的基本操作

npm install -g hexo-cli 安装Hexo
npm uninstall hexo-cli -g 卸载Hexo,文件夹内容
hexo init 初始化博客(在最开始安装时使用)

hexo n "名字" == hexo new "名字" 新建博文
hexo n page newpage 新建一个名为“newpage”的页面,默认网址主页地址/newapge/

hexo g == hexo generate 生成静态文件
hexo generate -d == hexo generate -deploy 习惯性连用,文件生成后立即部署网站
hexo s == hexo server 启动服务器,本地服务器的默认网址< http://localhost:4000/>

hexo clean 清楚缓存文件和已生成的静态文件,网站异常时可用。
组成使用(我习惯每次上传前都clean一下)
hexo clean && hexo s以及hexo clean && hexo d等等

将博客上线!

在此之前,你一定有一个文本编辑的强大工具了,首推Notepad++

修改config配置文件

修改blog文件夹下的config.yml文件,打开,拉到最后,修改deploy,内容参考如下:

deploy:
  type: git
  repo: https://github.com/QuiteZeal/QuiteZeal.github.io.git
  branch: master

一定注意冒号后面的空格,以及结尾的.get,然后保存即可。

这个操作的目的是,在使用hexo deploy命令时,知道该把内容部署到哪里,这个位置和你在github上看到的是一致的才对。

然后安装Git部署插件:

npm install hexo-deployer-git --save

然后就是

hexo clean
hexo deploy -g #连用+缩写

至此,上线工作完成,输入“注册名.github.io”就能直接访问了,比如我的https://quitezeal.github.io/(大小写不区分的)

绑定域名

使用阿里云或者腾讯云都行,通过域名解析,CNAME类型名进行绑定,www@这两个都可以直接记录到”你的注册名.github.io”上。

然后就是在github.io仓库的设置里,往下拉,把Custom domain设置成自己的域名即可。

至此,我的已经可以通过自己的域名进行访问了AhaKnow,不过暂时还不能通过https访问。

不放心的话,在可以在blog/source里建一个文本,在里面输入自己的域名,然后保存为CNAME,类型为所有文件。

美化一下自己的博客

暂时先用大神们写好的主题啦。

比较受追捧的是一款NexT主题,可以直接在git上下载,还是在之前blog目录下的命令行:

git clone https://github.com/iissnan/hexo-theme-next themes/next

自己感兴趣的,可以直接参照官方文档,进行探索。

然后打开站点的配置文件,之前那个config.yml,往下拉将里面的theme值改成next。(注意空格)当然,其他配置也可以进行探索和修改。

主题里面也有一个config.yml那是用来配置主题的,可以自行探索。

现在重新生成配置一下就好啦。

hexo deploy -g

意外:404

我在部署上传之后,发现打开竟然404了,不是仓库名字不对,也不是邮箱没有验证,因为按照之前一路走下来,一点问题都没有。

而鼓捣了半天发现,是因为自己的网络问题,我用的是外网,而且还是全局模式……换一个网络就登上去了。。

如果还想深入一些

比如,可以自己动手写个CSS,在已有的主题上进行自定义地修改,或者日后炉火纯青了,完全可以自己写一个主题,不是吗?(嗯,这也是我要努力学习的!)

发表自己的第一篇文章

就是因为习惯性的喜欢Markdown,如果你还不是很熟悉,建议参见markdown指南上的基础讲解,嗯,英文的,正好练习了一下英语阅读能力。

哦,对了 ,关于markdown的编辑器,首推Sublime,当然Notepad++也没为题。

hexo new “一篇新文章”

可以直接通过hexo new "一篇新文章"来创建一篇,并且这样创建的md文件会在开头自动生成标题、日期、标签等(可以自行设定)

当然也可以把已经写好的md文件直接粘贴过去source\_posts下面。

到此,利用Github+Hexo搭建自己的博客基本完成,后面还有更个性化的进阶学习,让我们下一篇继续!

hexo安装博客 踩坑:hexo command not found 可以在path环境变量中新增一个D:\Blog\node_modules\hexo-cli\bin,当然是你对应安装的hexo的路径 阅读详情

相关推荐

2021-11-05Mac系统在使用git与hexo搭建博客时遇到的问题

前言: 首先,博主是在一开始就是用Mac的,属于萌新用户,因为Mac新手用户在使用Mac系统时与Windows系统有很大的出入,因此往往要耗费大量的时间与精力去查询一些问题。这篇博客逻辑表述可能有一些不严谨,但供新手参考还是可以的。如有不满或补充,请在下方留言或私信博主。 在我们使用git与hexo搭建博客前先注册一个GitHub的账户,并建立一个仓库。如何操作网上有很多详细的步骤,这里就不细说了。 一. 首先Mac系统自带的编译器Xcode是自带git的(若是不确定可以在终端输入命令 node -

qq_63434799的博客 1330

hexo搭建个人博客过程及中间遇到的问题

文章目录准备过程安装node.js安装hexo初始化报错解决 准备 安装好git bsah 全程git bash下完成命令 过程 安装node.js 一路next,直接安装完成 //检测是否成功 node -v npm -v 安装hexo 1.在创建的文件夹blog下,打开git bash npm install -g hexo-cli 安装cnmp(阿里开发,国内速度快) npm install -g cnpm --registry=https://registry.npm.taobao.org

weixin_43482279的博客 7464

Hexo报错Usage: hexo <command>处理及图片显示问题

有一段时间没上GitHub的静态博客,今天上去看了一下发现图片都不能正常显示了,效果如下: 我的图片都是放在牛客网上的,我查了一下是牛客网的测试域名不能用了,需要绑定自己的域名,而且之前上传的图片也全部作废,不能再访问,也不能下载。。。。于是我决定把图片都重新放回到GitHub静态博客上 转移方法: 在source文件夹下新建一个images文件夹来存放图片 修改原来的图片地址,改为/imag...

CycloneKid的博客 5378

hexo+git+github+域名搭建个人博客提示404_2019全新记录Github+Hexo搭建个人博客逐步指南Win10系统

前言之所以要记录,是因为好记性不如烂笔头,我记性不好,容易忘……之所以要用Hexo,是因为它对新手很友好,很容易上手,并且对于有markdown写作习惯的同学来说,简直就是一款记录知识/成长/心得日志的一大利器。并且,随着后期个人水平的逐渐提高,学着自己做一个Hexo主题,也是一件很值得深入探索的有趣事儿。不多说,直接上手开始……安装前的准备下载Node.js和Git直接从官网下载,Node.js...

weixin_39678426的博客 329

从零开始一步步搭建Hexo-github个人博客Win10

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录前言一、Hexo是什么?二、使用步骤1.引入库2.读入数据总结 前言 提示:这里可以添加本文要记录的大概内容: 本人是学化学的硕士,纯小白。花了一天搭建hexo博客,安装的步骤还是有点多的,我是跟着codesheep羊哥的b站视频来安装的,但是安装过程还是出了不少问题;不过一旦出现错误把异常代码贴到csdn搜索,基本都能找到解决方法。 市面上的博客很多,如CSDN,博客园,简书等平台,不过都有广告和限制,有一个自己的个人博客还.

dsfdaifeng的博客 2413

Win10搭建Hexo+Github个人博客

一、前言 博主一直以来在学习过程中总是会出现学了就忘,记忆不深等问题。所以为了改善这一问题,就萌生了搭建自己的博客记录自己的学习过程、笔记与心得的想法。 作为一个小白,在实际的搭建过程中博主参阅了很多的视频或者图文教程,很多教程都很杂且不完整。所以接下来就给大家带来自己搭建的过程记录和其他比较好的教程。 二、大概流程 (1)安装配置Git工具 (2)安装配置Node.js (3)安装Hexo (4)生成博客 (5)将博客部署到Github 三、具体步骤 Step 1:安装配置Git工具 (1)下载安装

csdnwrj的博客 350

Hexo+GithubPage搭建个人博客win10系统

    前阵子用Hexo+GihubPage搭建个人博客,在此记录一下搭建过程,也希望能够帮助到有需要的同学,搭建环境是win10,具体步骤如下: 安装Node.js和Git Node.js下载链接,安装完成之后使用node -v命令验证是否安装成功,如果安装成功,会显示安装的版本号。 Git下载链接,安装完成之后使用git --version命令验证是否安装成功,如果安装成功,会显示安装的...

Yongzili的专栏 275

Hexo+Github搭建个人博客

开始 对于萌新来说,Hexo是一个非常容易上手的轻量级博客平台,只需简单的配置便可以打造令人满意的博客页面,下面是我自己搭建博课的流程,在此记录以备后续的需要。 Step1: 前期准备: 安装Node.js : Download 安装git for win: Download 注册GitHub账号: Github.com Step2:GitHub中新建(New)一个库(...

飞鱼の博客 390

使用hexo框架搭建属于自己的博客(win10)

个人博客,听起来有没有很炫酷。今天就记录一下我在win10系统搭建个人博客的全过程,成功之后还是很开心的,毕竟我们是具有极客精神的程序员~~ 参考视频地址 准备过程: 首先你得下载node.js以及git node.js下载地址 直接下载然后安装就行了 检查版本 由于国内镜像源速度比较慢,一般先安装cnpm淘宝源,复制下列命令粘到cmd执行 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装镜像后,输入下列指令,查看是否

陈常杰的博客 270

win10+hexo+github搭建个人博客

win10+hexo+github搭建个人博客 参考:https://hexo.io/,博客用于记录自己的学习工作历程 参考以下步骤安装 1、搭建环境准备(包括node.js和git环境,gitHub账户的配置) 2、安装 配置Hexo,配置将Hexogithub page结合起来 3、怎样发布文章 主题 推荐 主题 4、Net的简单配置 添加sitemap和feed插件

静静是我女朋友 4204

我要搭建hexo博客,记录搭建博客过程,也分享下

如何搭建hexo博客,如何部署到github 上,如何绑定自己的域名,如何更换主题

Izrj的博客 530

Hexowin10上应用

​ 之前hexo搭建在Linux环境下,最近重装了电脑和系统,切换至win10。在此记录一下使用过程中的问题。 重新安装hexo 遇见了无法执行hexo server命令的情况,错误提示: hexo : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\hexo.ps1,因为在此系统上禁止运行脚本。 参考 https://blog.cs...

ziguayungui的专栏 396

基于GitHub page和Hexo主题搭建个人博客(win)

(1)本篇描述了基于GitHub page和Hexo主题搭建个人博客基于GitHub page和Hexo主题搭建个人博客的基础方式,预计在下一篇当中将讲述Hexo的个性化方面的用法以及更新与发布(2)仅以此篇作为个人学习与分享,欢迎各位大佬点评。

qq_60624992的博客 1046

GitPage+Hexo搭建博客

记录了本博客搭建的详细过程,为之后的学习做一个备份。 参考文章:使用 Hexo+GitHub 搭建个人免费博客教程(小白向)(https://zhuanlan.zhihu.com/p/60578464)

wz_e18的博客 339

Git搭建个人博客

Git搭建个人博客 很多人都有写博客的习惯,所以我这篇博客就讲解一下如何在git上搭建一个个人博客。 环境 搭建个人博客需要配置配置一下环境,这里我是使用win10搭建的,因为像这种配置或者搭建东西,一般都是win系统比较麻烦,在mac和linux相对简单一点。 一、git 需要在系统里面安装git。 具体的安装步骤可以参考安装git 二、安装node.js 使用node.js来搭建相对比较方...

weixin_42304193的博客 905

从零开始使用 Hexo 搭建博客 保姆式教程

保姆级 全流程搭建Hexo博客 介绍了 本地部署 和 网络部署配置 两部分

Zkeq_的博客 1716

从零搭建Hexo+GitHub Pages个人博客:技术栈详解与实战部署

静态网站生成技术通过将Markdown等源文件预渲染为纯HTML、CSS和JavaScript文件,实现了极致的访问速度和安全性。其核心原理在于构建时渲染,避免了动态查询数据库的开销,从而大幅提升页面加载性能并降低服务器攻击面。这一技术为个人开发者和小型项目提供了高效、低成本的建站方案,尤其适用于技术博客、项目文档和个人作品集等场景。Hexo作为基于Node.js的静态站点生成器,结合GitHub Pages的免费托管服务,形成了当前最流行的个人博客技术栈之一。通过Git进行版本控制和自动化部署,开发者可以

weixin_30307921的博客 358

使用hexo+yilia+github搭建个人博客

经过几天的折腾,终于配成功了,现记录如下,本人是在win7上搭建个人博客的。 直奔主题,搭建个人博客主要分为以下几步: * 本地环境搭建(win7) * 安装hexo * 主题切换 * SSH配置 * 域名配置 * 鸣谢没错就这上面几步,就能使我们拥有自己的博客网站,帅不帅?酷不酷?0x01 本地环境搭建(win7) git安装(因为hexo发布是使用git发布的) 安Node.j

zxlvxj的专栏 5762
上一篇: Coursera 学习记录:计算机组成上机作业(利用系统功能调用实现字符串的查找比较)
下一篇: Coursera 学习记录:计算机基本结构quiz(习题记录)
Zeal Young
博客等级 码龄9年 57粉丝 152原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值