一直想着写一篇关于搭建我的博客的文章,可是最近老是被各类杂事缠身,抽不开身。
PS:(其实还不是由于本身最近懒了,手动捂脸),今天终于有时间来写一篇文章了。网上
有不少关于搭建我的博客的文章,有的须要购买域名有的须要买服务器,而且须要收费,本着
绿色无污染(免费)的原则,来开始咱们的旅程。
复制代码
###2、准备条件html
NodeJsnode
Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome浏览器就基于V8,同时打开20-30个网页都很流畅。
Nodejs标准的web开发框架Express,能够帮助咱们迅速创建web站点,比起PHP的开发效率更高,并且学习曲线更低。很是适合小型网站,
个性化网站,咱们本身的Geek网站!!
JS是脚本语言,脚本语言须要一个解析器才能运行。对于写在HTML页面里面的JS,
浏览器充当了解析器的角色。而对于须要独立运行的JS,NodeJS就是一个解析器。
每种解析器就是一个运行环境,不但容许JS定义各类数据结构,进行各类计算,还容许JS使用运行环境提供的内置对象和方法作一些事情。
例如运行在浏览器中的JS的用途是操做DOM,浏览器就提供了document之类的内置对象。而运行在NodeJS中的JS的用途是操做磁盘文件或者搭
建HTTP服务器,NodeJS就相应提供了fs、http等内置对象。
复制代码
Hexogit
Hexo 是一款基于Node.js、快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其余渲染引擎)解析文章,在几秒内,便可利用靓丽的主题生成静态网页。 官网及文档程序员
githubgithub
GitHub is the single largest host for Git repositories, and is the central point of collaboration for millions of developers and projects. A large percentage of all Git repositories are hosted on GitHub, and many open-source projects use it for Git hosting, issue tracking, code review, and other things. So while it’s not a direct part of the Git open source project, there’s a good chance that you’ll want or need to interact with GitHub at some point while using Git professionally.(摘自官方文档)
英文有限,我就直接翻译一下,可能会有点辣眼睛web
GitHub 是 Git 存储库的最大主机, 是数以百万计的开发人员和项目协做的中心点。全部 git 存储库中有很大一部分驻留在 GitHub 上,
许多开源项目都使用它来进行 git 托管、问题跟踪、代码审阅和其余操做。所以, 虽然它不是 Git 开源项目的直接部分, 但在使用 Git 的
专业性时, 您可能但愿或须要与 GitHub 进行交互。
复制代码
Markdownchrome
Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它容许人们“使用易读易写的纯文本格式编写文档,
而后转换成有效的XHTML(或者HTML)文档”。[1]这种语言吸取了不少在电子邮件中已有的纯文本标记的特性。
优势:
一、简单,容易上手
二、纯文本实现,程序员最爱,容易扩展,方便和其余工具联动
三、平台支持广:以Github为首的各类平台、各类博客都支持,基本上如今面向程序员的输入框均可以用Markdown来写了
四、丰富的工具链
五、编辑器:各类支持所见即所得的编辑器
六、和各类其余格式互相转化的工具。PDF、Mobi、Epub、HTML等等,几乎你能想到的全部格式它都能转换。
复制代码
###3、软件安装npm
NodeJS 下载地址 windows
git 下载地址 浏览器
+Typora(MarkDown编辑器)下载地址
PS:和上面那个设置差很少软件安装直接设置一个路径就OK了,我是安装在E盘下的E:\ProgramFiles\MarkDown,固然默认也能够,可是须要你记住路径便可。
一、右击属性电脑—>属性打开—>高级系统设置——->环境变量—>path,点击编辑在里面,输入你的NodeJS的安装路径便可,E:\ProgramFiles\NodeJs是个人NodeJs的安装目录,__注意:__你配环境变量的时候要配你本身安装的目录。配环境变量是为了让windows的命令行能调用到NodeJS里面的命令。
二、安装Hexo __第一步:__打开命令行
在键盘中直接按下win+R键打开运行窗口,输入cmd打开命令行
复制代码
__第二步:__进入安装NodeJs路径
__第三步:__开始安装hexo,利用 npm 命令便可安装。
npm install -g hexo
复制代码
稍做等待,便可安装成功。接下来,执行
mkdir blog && cd blog
复制代码
此处blog即是你的博客目录,固然其余什么名字也是极好的,看心情了,此时最好将此目录备份到云盘或者其余地方,以防文件夹丢失后博客就没有了。
而后执行
hexo init
复制代码
安装依赖包
npm install
复制代码
至此,博客搭建成功!固然,仅仅是本地的了。此时执行
hexo g
复制代码
便可生成静态页面,而后执行
hexo s
复制代码
访问http://localhost:4000便可看到你的博客(运行了是这样的以下图所示)。
若是想让放到网上该怎么办呢?那就接着往下看咯。__注意:__暂时别关你的cmd窗口。
###5、部署博客到github
The first thing you need to do is set up a free user account. Simply visitgithub.com, choose a user name that isn’t already taken, provide an email address and a password, and click the big green “Sign up for GitHub” button.
你所要作的第一件事就是建立一个免费的用户帐号。简单地访问https://github.com,选择一个未被使用过的用户名,提供一个邮箱地址以及密码,并点击写着“sign up for GitHub”的绿色按钮。
通过邮箱认证后,该帐号就会被激活的。
注:Github Pages的Repository名字是特定的,好比我Github帐号是muyishuangfeng,那么我Github Pages Repository名字就是muyishuangfeng.github.io(由于我以前建立过本身的我的博客了因此输入muyishuangfeng.github.io时是已经存在的__以下图所示__,为了说明因此多加了一个s)。
建立成功后,回到主页面,点击进入你刚刚建立好的仓库
接着点击settings,进入仓库管理
选择主题并发布
更新你的站点(点击连接便可进入,__注意:__这里为了让你们看清楚效果,申请了另一个帐号进行演示的,其实都是同样的。)
至此,你的github pages就发布成功了。试试在浏览器的地址栏输入”你github的用户名.github.io”吧! 个人效果以下图所示:(比较丑,固然这尚未结束)
如今回到你的 github仓库,而且复制地址
打开你安装好的NodeJS的根目录,而后点击进入刚刚新建的blog文件夹:(右击_config.yml打开配置文件)
四、 更新 接下来,回到你的cmd窗口,只需执行两个命令:
npm install hexo-deployer-git --save (这命令是为了解决hexo新版本的部署问题)
hexo g 回车 (这是从新生成blog)
hexo d 回车 (这是将本地blog部署到github的仓库)
如今,试试在浏览器的地址栏输入:“你的用户名.github.io”,此时,你应该会看到这样的界面(我这个 经配置过样式的博客):
复制代码
接下来,开始对博客进行一番改造。毕竟博客是本身精神上的一个家园,固然要装饰打造一番了。
首先嘛,天然是进行主题的选择了,主题在这里。选择好一个主题以后,就是进行主题的安装了。在刚刚那个网站上,点击右边的连接能够看到主题的Demo,选则一个喜欢的主题而后点击左边的连接进入github上:(我这里的是NexT)
而后命令行进入到你的博客目录的themes目录下:
点击鼠标右键,打开github bash执行下面语句:
git clone主题 或者 git clone github.com/iissnan/hex…
(这个是刚刚那个页面的Install下的命令 )
其中git clone后面的连接为你进入的主题的连接地址,themes/NexT为你的保存目录,此处以NexT主题为栗子,具体的以你选择的主题为准。
而后进入到/blog/_config.yml里面,将theme改成你刚刚下载保存的主题的名字,我这里是NexT。
而后回到命令行,执行:
hexo g 回车 (这是从新生成blog)
hexo d 回车 (这是将本地blog部署到github的仓库)
复制代码
好了,试试在浏览器的地址栏输入:“你的github用户名.github.io”,你将会看到以下主题的blog页面/:
怎么发布到github的博客呢?仍是老样子啊:
接着:
终于奋战了好几个小时一份热乎的搭建博客的文章出来了,这里须要感谢开源网站和各类好用软件的支持了。 感谢冯皓林的 《Hexo+github搭建我的博客》 感谢 GitHub、Git、NodeJs 若是有写的不对的地方还请各位不吝赐教。 个人简书 个人掘金 个人github 个人我的博客
小弟就厚着脸皮说欢迎关注哈