使用git+hexo部署自己的博客

目录

  • git与node.js的安装配置
  • hexo常用命令
  • 在本地部署博客
  • 通过Git Hub将博客部署到远端服务器
  • 拓展
  • 更新博客

记录自己的博客部署过程。

使用hexo+git部署博客。

参考视频:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo

视频作者: CodeSheep



git与node.js的安装配置

git的安装

官方下载地址

git若从官方下载的话下载速度过慢且下载时间过长可能会出现下载失败等问题,因此推荐从镜像网站下载git。如淘宝npm的镜像。

国内镜像下载

选择最新版本下载即可,本文章书写日期时最新版本为2.22.0版本

因版本可能不同,因此安装过程中的组件选择可能会有所差异,基本默认选项即可

下载完成后进入安装界面 (注:以下安装的选项请以实际自身需求为准,仅供参考):

选择需要安装的组件。

选择git的默认编辑器:

配置环境变量选项,推荐默认第二项:

选择https传输协议 默认即可:

选择git的换行方式 请根据自身需求更改:

设置git命令行的样式:

设置选项:1.是否允许文件缓存 2.是否允许git许可证管理,默认勾选:

是否参与新的测试,貌似是会使git更快,但还不稳定:

install 安装即可:

git安装完成后,需要进行配置,在git安装目录或菜单栏中找到git-bash,打开后如图

输入如下,其中" "中的your name 和your email为你的Git Hub用户名(非昵称)与邮箱

git config --global user.name "your name"
git config --global user.email "your email"

并可通过以下命令查询用户名与邮箱

git config user.name
git config user.email

结果如下



node.js 的安装

官方下载

该文章书写时,版本为10.16.0

安装界面:

选择安装模式,我选择了第四个,next即可:

以下过程命令行既可使用windows的cmd,也可以使用git安装过程中的 git-bash进行操作

命令行中输入node -v可查看node的版本 ,输入 npm -v查看npm包的版本

node -v
npm -v

使用淘宝镜像下载 cnpm:

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

下载完后查看cnpm版本

cnpm -v

使用cnpm下载hexo,用hexo -v查看hexo的版本:

cnpm install -g hexo-cli
hexo -v


hexo常用命令

hexo new "title" 新建文章(md文件),title为文章的标题
hexo new page "pagename" 新建网页,pagename为网页的名称
hexo clean 清除部署的緩存
hexo n == hexo new 新建一篇文章
hexo g == hexo generate 生成静态页面
hexo s == hexo server 本地部署,可预览网站,默认端口为4000,浏览器输入localhost:4000即可进入网站进行预览,回到git-bash按ctrl+c退出预览(退出后localhost:4000失效)
hexo d == hexo deploy 将网站部署到GitHub
hexo g -d 生成页面并部署到GitHub
hexo g -s 生成页面并本地部署进行预览


在本地部署博客

在我的电脑中创建文件夹用于存储博客网站,文件夹名称自定义,我使用blog,目录为D:\blog。打开blog文件夹,右键空白处打开git-bash。

输入hexo init进行初始化,等待时间较长,约几分钟

hexo init

:若blog文件夹非空,则会报错:

使用hexo s 在本地启动博客

hexo s

如图所示显示本地部署成功

打开网页,地址栏输入http://localhost:4000即可从本地进入博客

到此为止仅仅是在本地部署博客,接下来需要通过github来将博客部署到服务器。


通过Git Hub将博客部署到远端服务器

通过Ctrl+C停止服务

登陆自己的Git Hub 点击进入登陆界面

登陆成功后,网页右上角个人头像旁边,点击 + 号 选择New repository创建一个新的仓库

界面如图,其中Repository name中必须输入 [用户名].github.io

最后点击create repository创建仓库

创建成功后,界面如图,此时还没有任何代码。复制https的链接。

回到git-bash 使用cnpm安装git部署插件,插件名为:hexo-deployer-git

cnpm install --save hexo-deployer-git

安装过程中的警告可以忽略

修改 _config.yml 文件

vim _config.yml

移动到最低端,在deploy:后面修改文件,按 i 键进入插入模式,内容如下

  type: git
  repo: 刚刚复制的https链接
  branch: master

修改前:

修改后:

==注意==: windows系统下,冒号: 后面要有一个空格,缺少空格的话type、repo、branch不会高亮,语句不会生效

插入完成后,按ESC,然后输入 :wq 保存并退出(linux语句)

修改完配置文件后 输入hexo d 即可将博客部署到远端服务器

hexo d

最后结果如图:

该过程可能需要输入用户名和密码,若Git Hub配置过SSH则不需要输入。如果有报错,检查之前的

git config --global user.name "your name"
git config --global user.email "your email"

配置语句是否正确 your name为用户名(非昵称)



部署成功后刷新Git Hub刚刚创建的仓库页面,就能加载出博客的代码了

并且可通过 用户名.github.io 来访问自己的博客,效果如图:

至此,博客的部署已经完成。


拓展

打开blog文件夹,可看到有以下目录

  1. 进入目录source/_posts

    里面的md文件 (markdown文件)为博客上的文章,可将md文件存放至该目录来更新博客

    hexo new生成的文章也存放在这里

  2. themes目录里为博客的主题

    可从Git Hub下载主题并通过修改 _config.yml 来应用主题

    例如使用Git Hub上的yilia主题

    在git bash中输入以下代码进行克隆

    git clone http://github.com/litten/hexo-theme-yilia.git themes/yilia

    clone 为克隆操作

    http链接为目标代码仓库(repository) 后面加上 .git

    themes/yilia 为保存目录,将目标保存到themes/yilia中

    等待完成后,修改 _config.yml文件

    vim _config.yml

    修改目标如下

    将theme改为刚刚保存的目录 yilia ,然后更新博客。

更新博客

localhost:4000 页面,大部分修改配置后可以直接刷新页面进行预览,如更改配置、更新文章等等。但有的操作需要清除缓存重新部署页面才可以生效,比如更新插件等等。

故有时直接刷新未加载出来的更新,可尝试重新部署来查看是否更新成功。

hexo clean #清除缓存文件
hexo g -s #在本地生成页面直接部署,可通过localhost:4000查看

若在本地预览发现网站符合自己的预期,即可将网站部署到github

hexo d

原文地址:https://www.cnblogs.com/luqwer/p/11219626.html

时间: 2024-12-11 20:09:56

使用git+hexo部署自己的博客的相关文章

《Hexo+github搭建个人博客》

<Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+github搭建个人博客>1 思维导图总览:2 What?2 简介:2 Hexo:2 NodeJs2 Github4 Git5 Github page:5 Markdown6 How?7 环境配置:7 安装Git8 安装Node.js9 安装hexo13 第一步:打开cmd.13 第二步:进入NodeJS

github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)

详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clone,运行,看到博客演示.觉得可以给颗星星):https://github.com/saucxs/hexo-blog-origin.git 一.搜索引擎收录 1.验证网站所有权 登录百度站长平台:http://zhanzhang.baidu.com,只要有百度旗下的账号就可以登录,登录成功之后在站点

github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)

详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如果觉得可以请给颗星星):https://github.com/saucxs/saucxs.github.io.git 注意1:怎么避免 .md 文件被解析? Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中,在执行hexo depl

使用hexo搭建github个人博客网站

搭建步骤: 1>Mac或win电脑一台,本文以mac为例. 2>下载安装Git和Node 3>安装hexo 4>注册登录GitHub,创建一个仓库,库名格式为:GitHub用户名.github.io 5>购买域名,本文以阿里云为例,解析域名. 6>博客主题,标题,界面设置 安装Git 下载地址:https://git-scm.com/download/ 安装Node 下载地址:http://nodejs.cn/download/ 验证是否安装成功: 安装hexo //安

利用hexo+github创建个人博客

因为想拥有一个独属于自己的个人博客啊. 安装部署hexo 进入一个安全的目录,cd ~/Desktop 在 GitHub 上新建一个空 repo,repo 名称是「你的GitHub用户名.github.io」 安装 Hexo $ npm install -g hexo-cli $ hexo init myBlog $ cd myBlog $ npm I $ hexo new这时会看到一个 md 文件的路径 $ vi _config.yml编辑网站配置 把第 6 行的 title 改成你想要的名字

Ubuntu+Hexo+Github搭建个人博客

目录 目录 目录 1. 简介 环境 2. Git安装及配置 2.1 安装Git 2.2 创建Git仓库 2.3 配置git仓库 2.4 添加公钥 3. Node安装 4. Hexo安装及配置 4.1 安装hexo 4.2 初始化hexo文件夹 4.3 Hexo操作 4.4 将git库和hexo链接起来 5. 更换主题 6. 博客迁移 6.1 常规迁移 6.2 特殊情况 1. 简介 以前部署的Hexo博客是在Windows上搭建的,在Windows系统使用很方便,碰到一些问题也都能够解决:现在安装

使用Node.js+Hexo+Github搭建个人博客(续)

一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在上篇博文的基础上分别从以下几个方面做简单的后续介绍: 博客相关配置介绍 博客主题 Yilia 配置介绍 如何制作并配置网站缩略图 如何将博客同步到 Github.Coding 中 如何使用 Git 同步 Github 与 Coding 的代码 如何申请域名并作域名解析 如何将域名绑定至 Github.Codi

hexo next主题为博客添加分享功能

title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 --- 今天心血来潮,决定给博客添加分享功能,百度上首先是找到了使用shareSDK的分享功能,最后在实践的过程中发现它添加时步骤比较多,添加完成后效果比较丑(就是一个长条的浅蓝色按钮),而且点击后想要退出分享比较麻烦(它的取消按钮实在太难找了,它在页面最下方的位置,呈现浅灰色,这个设计太反人类了

Hexo快速搭建静态博客并实现远程VPS自动部署

这篇文章将如何搭建hexo,以及如何通过git webhooks实现远程vps的自动部署 这篇文件适合的条件: 简单的用于个人博客.公司博客展示,hexo的定位是静态博客,要实现动态服务器的功能并不适合 有自己私有的服务器.vps.域名 git仓库,Github或国内的Coding.net hexo本地部署 流程:先在本机搭建好hexo环境,push到git仓库,再部署到服务器上. 第一步,安装hexo命令行工具,这个工具在服务器端也需要执行安装 1 npm install hexo-cli -