Hexo + Github搭建自己的博客
技术博客地址:DoubleDragon's Blog 博客项目文件地址:github.com/wsl2ls/Wsl2…
目录
一、 搭建环境 二、hexo创建本地博客 三、设置自己喜欢的博客主题 四、将本地博客部署到github 五、新建博客文章 六、接入Gitment评论系统
一、 搭建环境
1、下载安装Node.js和Git
- Node.js:Node.js下载地址
- Git:使用命令行
$ brew install git
安装或者 点击这里下载安装程序
辅助命令:
* 查看当前node版本号:`$ node -v`* 清除node.js的cache:`$ sudo npm cache clean -f`* 安装n,用来管理node版本: `$ sudo npm install -g n`* 安装最新版本node:`$ sudo n stable`* 查看当前git版本号:`$ git --version`
复制代码
2、使用 npm 安装 Hexo
- $ npm install hexo-deployer-git --save
- $ hexo version #查看Hexo的版本
二、hexo创建本地博客
使用命令行创建博客:$ hexo init 博客项目名 ,这里的博客项目名我用的是wsl.github.io,完成后,会在你的 /Users/yourname下创建一个wsl.github.io文件夹;然后可以通过命令行部署一下本地环境,然后就可以在浏览器中预览本地博客了。
$ hexo init wsl.github.io //创建本地博客$ cd wsl.github.io //进入博客目录
$ hexo clean //清除缓存
$ hexo g // hexo generate重新生成代码
$ hexo s // hexo server 部署到本地,然后打开浏览器访问 localhost:4000 查看效果复制代码
执行如下命令,生成静态页面至public目录,开启预览访问端口(默认端口4000,'ctrl + c'关闭server),打开浏览器访问 http://localhost:4000 预览默认博客主题效果
cd wsl.github.io //进入博客目录
hexo clean //清除缓存
hexo g // hexo generate重新生成代码
hexo s // hexo server 部署到本地,然后打开浏览器访问 localhost:4000 查看效果复制代码
三、设置自己喜欢的博客主题
刚创建的博客默认使用的主题是
landscape
,不想用这个,咱换个 修改前,当然是先去获取你喜欢的主题了。主题集合。
- 通过如下命令行来下载主题 或者手动前往 github.com/iissnan/hex… 下载,下载完成之后放到wsl.github.io/themes目录下
cd wsl.github.io //进入博客目录
git clone https://github.com/iissnan/hexo-theme-next themes/next
复制代码
注意:配置的文件内冒号:后面一定要有一个空格,否则无效,报错。
- 博客配置:用文本编辑器打开wsl.github.io文件内的_config.yml文件,修改内部参数。
title: DoubleDragon's Blog
subtitle: Rome was not built in one day.Study hard and make progress every day.
description: ※ 微信公众号:iOS2679114653※ QQ:1685527540
author: 且行且珍惜_iOS
language: zh-Hans#改为true后,当创建文章后,会自动一并创建一个同名的文件夹当做图片文件夹
post_asset_folder: true#设置主题
theme: next
deploy:type: gitrepository: https://github.com/wsl2ls/Wsl2Ls.github.io.gitbrachanc: master
#这一行需要自己加,为博客头像
avatar: "https://upload.jianshu.io/collections/images/1661007/艾玛·沃特森.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"
复制代码
主题配置:用文本编辑器打开wsl.github.io/themes/next目录下的_config.yml文件,修改内部参数。 参数说明以及详细的设置情况可以看官方文档:theme-next.iissnan.com/getting-sta…
配置完成之后,通过如下命令后预览博客:
cd wsl.github.io //进入博客目录
hexo clean //清除缓存
hexo g // hexo generate重新生成代码
hexo s // hexo server 部署到本地,然后打开浏览器访问 localhost:4000 查看效果复制代码
四、将本地博客部署到Github
1、创建一个新项目Wsl2Ls.github.io,项目名必须为: 用户名.github.io
2、点击设置, 创建一个page,随便选择一个主题,我们马上就用自己本地的主题把它覆盖掉。
3、将我们Hexo的代码部署到github上
- 首先用文本编辑器打开wsl.github.io文件内的_config.yml文件,修改博客内部参数,然后保存。
deploy:type: gitrepository: https://github.com/wsl2ls/Wsl2Ls.github.io.git //同步到新建的项目brachanc: master
复制代码
- 通过命令部署到github上
npm install hexo-deployer-git --save //先装个插件压压惊
hexo d // hexo deploy 部署的命令,发布到Github
复制代码
4、部署完成之后,打开浏览器访问 wsl2ls.github.io 查看效果。
五、新建博客文章
本地博客环境都配置完成了,接下来就是新建文章了,用命令 :hexo new "name",在wsl.github.io/source/_posts目录下生成 name.md文件,这个文件支持Markdown语法。 name.md文件打开之后 ,你的文章格式如下图所示,才能正确的显示时间,标题,分类等。当然如果你不需要这些东西,也可以不设置。
文章写完之后, 通过如下命令后,打开浏览器访问 localhost:4000预览博客:
cd wsl.github.io //进入博客目录
hexo clean //清除缓存
hexo g // hexo generate 生成静态页面至public目录
hexo s // hexo server 部署到本地,然后打开浏览器访问 localhost:4000 查看效果复制代码
预览没问题之后,就可以发布了。
hexo d // hexo deploy 部署的命令,发布到Github
复制代码
六、接入Gitment评论系统
这里我选择接入Gitment,当然你也可以官方文档 theme-next.iissnan.com/third-party… 接入其它三方评论系统。
Gitment的接入方法和步骤,直接看Gitment的开源大神https://imsun.net/posts/gitment-introduction/的介绍。
参考资料: blog.csdn.net/Hoshea_chx/… www.jianshu.com/p/8681ab76d… www.cnblogs.com/sqlsec/p/he… www.jianshu.com/p/57afa4844… imsun.net/posts/gitme…
Hexo + Github搭建自己的博客相关推荐
- hexo部署成功但是没效果_使用 Hexo+GitHub 搭建个人免费博客教程(小白向)
前言 近些年来很多用户都喜欢使用 GitHub Pages 来搭建 Hexo 静态博客网站,其最吸引人的莫过于完全免费使用,并且非常稳定. 虽然搭建时比较麻烦,有点折腾,但是配置完成后,基本不需要操心 ...
- 利用 Hexo + Github 搭建自己的博客
扯在前面 在很久很久以前,一直就想搭建属于自己的一个博客,但由于各种原因,最终都不了了之,恰好最近突然有了兴趣,于是就自己参照网上的教程,搭建了属于自己的博客. 至于为什么要搭建自己的博客了?哈哈,大 ...
- 猿创征文|Hexo+Github搭建完全免费个人博客详细教程
前言 完全免费的搭建个人博客,没有任何收费,零基础也能上手,不需要编程基础,跟着操作来即可. 首先: 要了解一下我们搭建博客要用到的框架:Hexo是高效的静态站点生成框架,它基于Node.js.通过H ...
- GitHub搭建的个人博客发表文章
GitHub搭建的个人博客发表文章 使用markdown语言 可以使用cdsn直接编写文章然后导出成.md文件 放到source下面的_posts文件中 标题改一下 最后 hexo s hexo g ...
- mac环境下搭建hexo+github pages+next个人博客
GitHub Pages Github Pages 是面向用户.组织和项目开放的公共静态页面搭建托管服务,站点可以免费托管在Github上,你可选择试用Github Pages默认提供的域名githu ...
- 使用Jekyll + GitHub 搭建自己的博客
中文文档:http://jekyllcn.com 或 https://www.jekyll.com.cn/ 英文文档:https://jekyllrb.com/ 什么是Jekyll? Jekyll ...
- 用Hexo动手搭建自己的博客主页
开始之前先在Github上申请一个账号,并新建一个项目,以username.github.io 格式命名,然后进入settings创建Github Pages,如下图: (图1) (图2) 下面是主要 ...
- 利用github搭建自己的博客分享
安装和配置git 一.下载 msysgit是Git for Windows版,其Home Page为:http://msysgit.github.io/ 点击页面中"Download&quo ...
- 【Hexo】搭建自己的博客并到Github Pages
一.什么是Hexo 用Hexo官网的介绍https://hexo.io/zh-cn/docs/,Hexo是一个快速.简捷且高效的博客框架.Hexo使用Markdown解析文章,可以在很短的时间内生成静 ...
- 四十五、Gtihub+Hexo+icarus搭建自己的博客
最近我看了hexo的主题,发现了很多好看的主题.很多人的博客就是用别人的主题,搞出来的.之前我的博客发现真的是太难看了,然后没有去维护.那个时候不知道没有关系,今天我知道了,就是把之前删除了. 我在茫 ...
最新文章
- SQL Server DATEADD() 函数
- Linux centos 集群下ssh无密码
- go 17个字符串函数使用示例
- boost::hana::count_if用法的测试程序
- SAP应用followup transaction的错误讨论
- HashMap默认大小和扩容后的大小
- 整合后台服务和驱动代码注入
- java闹钟程序声音_跪求高手帮忙写一个JAVA手机闹钟程序 实现添加铃声和设置多闹钟...
- recvfrom 无法接收 icmp 差错数据包_利用ICMP隧道技术实现C2通信
- java重写的代码_java tostring方法重写代码示例
- -bash: make: command not found
- 创作优质的视频号作品四个方向
- [机器学习实战]决策树
- 特征工程(三):特征缩放,从词袋到 TF-IDF
- STM32F407+Cubemx学习应用[5]——DMA收发ModbusRS232数据——威纶通触摸屏
- el-upload上传图片,限制上传数量,超过最大数量则不展示上传组件,可点击删除
- 星际争霸2人工智能初探——SC2LE研究环境搭建
- 不能学习vlan的解决
- 混合牛奶AcWing
- mysql(.msi)下载、安装及配置教程