通过github构建个人博客1-基本环境搭建
摘要: 随着时代的发展,知识的更新速度越来越快,“活到老,学到老”显得必须且重要。在众多学习方法之中,知识输出是学习的不二法门。互联网时代,通过写博客去记录自己的学习过程,是一种相对比较方便且效率很高的方式。因而,养成一个写博客的习惯,对于科研和工作,都有很大的帮助。本文主要介绍如何在windows操作系统上基于github平台,结合hexo框架(一个node.js框架)来构建一个专属于个人的博客。
关键词:个人博客,github,hexo框架
由于配置整个框架和平台还是比较麻烦,所以本教程分为两部分,第一部分属于搭建环境的基本过程,第二部分属于配置主题等的博客个性化历程。每一部分都会给出详细代码和图片示例。
本节主要介绍本地环境的安装与配置,包括:git[1],node.js[2], hexo[3];此外还包括github账户申请与博客仓库的创建,最后将本地环境与博客仓库建立连接。做完这些,就完成了搭建个人博客的所有前提工作。
再次声明,本文中的所有操作都是基于windows操作系统,具体版本为win10 64位。
1. 本地环境的安装与配置
(1) git的安装
git的下载地址,直接点击图中红色边框中的下载按钮便可。下载后一路同意或者下一步,便可。
安装完成后再开始菜单里有一个Git的文件夹,里面有个Git Bash的程序,打开它,出现以下界面代表安装成功。
(2) node.js安装与配置
node.js下载地址:https://nodejs.org/en/download/
直接点击图中红框内的下载地址便可,下载完成后一路同意或者下一步。实在不会的可以参考博客:https://blog.csdn.net/qq_26562641/article/details/72235585
安装完成后打开cmd,分别输入以下命令 ,分别能显示node 和 npm的版本就说明安装成功了。
node -v
npm -v
(3) hexo的安装与配置
在本地磁盘中设置一个blog目录,例如我的是:g:\blog(G盘下的blog文件夹)。cmd中切换到该目录下,输入安装命令:npm install hexo -g
, 安装完成后输入:hexo -v
, 显示hexo的版本则说明安装成功。
输入hexo初始化命令:hexo init
后等待一段时间,出现图中提示便初始化完成。
接下来安装必要的组件:npm install
,之后输入处理命令: hexo g
并开启服务器:hexo s
出现以下信息:
把网址复制到浏览器地址栏后回车,便显示:
如果无法显示网页,说明端口可能被占用,更改端口便可。
hexo server -p 4001
至此,成功了一小步!
2. github账户申请以及博客仓库的建立
进入github主页: https://github.com/ ,填好用户名,邮箱,密码便可:
登录后建立博客仓库,需要注意以下几点:
a. 项目必须要遵守格式:账户名.github.io ,例如:gxrao.github.io(gxrao就是博客用户名)
b. 需要勾选Initialize this repository with a README
创建博客仓库后进入仓库并点右侧的setting,向下拉到GitHub Pages
可以看到博客的网址,点击便可访问
至此,仓库已完成搭建。
3. 将本地环境链接到博客仓库
将本地环境链接到博客仓库之后就可以在本地编辑,完成之后再同步到仓库里,这样就能在离线的环境里进行编辑博客了。
(1)设置git
注意:此处所有操作假设github用户名为:test 邮箱为:test@hotmail.com
打开Git Bash,分别输入:
git config --global user.name "test"
git config --global user.email "test@hotmail.com"
到用户目录下,检查.ssh文件夹:cd ~/.ssh
如果提示没有,则新建一个:mkdir ~/.ssh
输入生成rsa命令:ssh-keygen -t rsa -C "test@hotmail.com"
之后所有提示都直接回车(三个回车),再ls
一下,便显示:
提示信息中显示了rsa文件的保存目录。
输入eval "$(ssh-agent -s)"
,添加密钥到ssh-agent
再输入ssh-add ~/.ssh/id_rsa
,添加生成的SSH key到ssh-agent
登录Github,点击头像下的settings,添加ssh
新建一个new ssh key,将id_rsa.pub文件里的内容复制上去
点击add便完成添加。配置失败可以参考:https://www.cnblogs.com/superGG1990/p/6844952.html
为了保证完全成功,可以测试一下:ssh -T git@github.com
之后输入yes
接下来配置本地环境,在本地博客目录里找到_config.yml文件,修改repo值(在末尾)
deploy:type: gitrepo: git@github.com:gxrao/gxrao.github.io.gitbranch: master
其中repo的值在:
一定要选择Clone with SSH
(2) 创建博客
hexo new "blog name" # 创建新的blog
在blog文件夹的/source/_post/ 文件夹下就有一个 blog-name.md 的文件,用markdown编辑器编辑好博文后,再使用,生成和部署命令:
hexo g
hexo d
也可以采用一个命令完成两件事:
hexo d -g
我们经常会在blog中插入图片,例如本文就有很多图片,这个时候就需要特殊处理:
a. 在blog文件夹的source目录下建立一个images文件夹,专门用来存放图片。而且这样设置之后的好处是既可以本地实时预览,部署网页又不需要修改,能够做到所见即所得。
b. markdown 编辑器使用typota(一款我觉得最优秀的markdown编辑器,下载地址:https://www.typora.io/),设置图片目录:编辑-图片工具-当插入图片时,目录选择a中建立的images目录,此时文档的最上面会出现如下代码:
总结一下,部署博客的过程(两部走)便可以完成。完成后再浏览器地址栏输入:https://test.github.io 就能访问博客了。
先hexo new "博客名"
后hexo d -g
博客效果图:
hexo其他命令可以参考:
https://blog.csdn.net/qq_26975307/article/details/62447489
4. 总结
本节主要介绍了基本环境的配置,以及简单的blog部署。至此,简单的blog就搭建完成了。下一节主要介绍blog个性化设置的部分,包括个人域名,页面部署等,做到真正的个人博客。
参考文献:
[1] https://baike.baidu.com/item/GIT/12647237?fr=aladdin
[2] http://nodejs.cn/
[3] https://www.cnblogs.com/mophy/p/7016331.html
通过github构建个人博客1-基本环境搭建相关推荐
- 基于Hexo+Github构建个人博客(一)
越来越多的小伙伴不满足于在现有的博客网站上写文章,想完全根据自己的喜好构建一套,程序员可以互相交流技术,文青也可以彼此交换想法.基于Hexo+Github是目前采用比较多的方式,Hexo重要的特点 ...
- 使用GitHub构建个人博客网站
想起来之前搭建个人博客网站的总结还没有写,趁着这几天有时间回头来分享一下.本人的个人博客网站采用的是GitHub+jekyll,GitHub托管代码,jekyll发行生成静态网页. 1.购买域名 域名 ...
- github page hexo博客gitee_GitHub+hexo快速搭建个人博客
写博客的好处是我们用博客表达自己.升华自己. 平时学习新知识总是经常性会遗忘部分内容,使用过有道云,印象笔记,公众号,缺金社区,csdn,Github,码云等等记录了零零散散一些内容.所以准备使用he ...
- Github Pages + Jekyll 独立博客一小时快速搭建上线指南
只要一小时?! 人生道路上布满了坑,于是有了人生导师. 美丽的地球上布满了坑,于是有了Google Earth. 使用Github Pages搭建独立博客的过程中布满了坑,所以有了这篇指南. 我在 ...
- 一步步在GitHub上创建博客主页-最新版
github page github-page是一个免费的静态网站托管平台,由github提供,它具有以下特点: 免空间费,免流量费 具有项目主页和个人主页两种选择 支持页面生成,可以使用jekyll ...
- 使用Blogdown构建个人博客
简介 你是不是特别想创建一个自己的私人博客?以及为什么要使用 blogdown 搭建博客?难度是不是很大,和其他搭建博客而言有什么优点? 在小编使用过一段时间后,个人认为 blogdown 搭建博客的 ...
- 通过docker-compose构建ghost博客(一)
通过命令构建ghost博客 docker run -d --name ghost -p 2368:2368 -v $PWD/data:/var/lib/ghost ghost 当然也可以编写yml文件 ...
- hexo+github创建个人博客--深入篇
内容简介 此篇文章介绍的是个人博客的一些配置内容,包含博客项目的介绍.主题配置.图床配置以及各种第三方功能插件的使用,若还未搭建个人博客的哥们可以先参考hexo+github创建个人博客–基础篇搭建出 ...
- github.io 公共博客
遇到的坑: 1.node版本太低,导致安装后hexo一直找不到 2.为什么访问http://localhost:4000/,无反应? 解决方法:可能是由于端口问题引起的.使用Ctrl+C中断本地服务 ...
最新文章
- python获利模式_Python 分段利润提成
- 使用MakeCAB.exe命令创建CAB文件
- 树莓派3开wifi热点
- asp.netcore oracle,Asp.net core 3.1+EF Core2.2.6+Oracle.EntityFrameworkCore2.1.19连接Oracle数据库...
- VScode 汉化以及侧栏npm脚本显示
- java第三章:流程控制语句
- 题解P3942_将军令
- svn 无线服务器,远程svn服务器
- Android美工坊--一个QQ登录验证的小例子
- 第五周课程总结与报告
- “我把技术负债玩成了俄罗斯方块,却永远赢不了!”
- socket 函数 setsockopt()用法
- Rainmeter,让你的桌面更精彩~
- Clipboard.js实现复制文本到剪贴板功能
- 台式计算机入门基础知识,电脑基础知识:新手入门最全电脑知识干货
- Android 仿微信实现语音聊天功能
- 基于机器学习场景,如何搭建特征数据管理中台?
- HTTP常用端口号与对应的服务说明
- 逆向某视频直播软件,破解收费观看
- 安科瑞运维项目中的计量产品应用及解决方案
热门文章
- 解决org.springframework.beans.factory.NoUniqueBeanDefinitionException: No qualifying bean of type 异常
- 鸿蒙系统内部测试板,华为鸿蒙系统内测
- iOS,mac下使用Coding.Net
- Java图片添加水印功能
- 值得推荐的五个源码网站
- android版本向上兼容吗,Android 的向前兼容和向后兼容
- 读书读书 吼吼~~
- 计算机组成原理习题——日常记录
- Spring:项目国际化
- USB3.1HUB驱动芯片VL822