专属博客,你值得拥有(Windows 版本)

转载请标明出处,谢谢专属博客,你值得拥有(Windows 版本)

1、前提:

一直想着写一篇关于搭建我的博客的文章,可是最近老是被各类杂事缠身,抽不开身。
 PS:(其实还不是由于本身最近懒了,手动捂脸),今天终于有时间来写一篇文章了。网上
 有不少关于搭建我的博客的文章,有的须要购买域名有的须要买服务器,而且须要收费,本着
 绿色无污染(免费)的原则,来开始咱们的旅程。
复制代码

###2、准备条件html

hexo.png

  • 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

    NodeJs.png
    PS:软件安装直接设置一个路径就OK了,我是安装在E盘下的E:\ProgramFiles\NodeJs中,固然默认也能够,可是须要你记住路径便可。

  • git 下载地址 浏览器

    git.png
    PS:和上面那个设置差很少软件安装直接设置一个路径就OK了,我是安装在E盘下的E:\ProgramFiles\git,固然默认也能够,可是须要你记住路径便可。

+Typora(MarkDown编辑器)下载地址

MarkDown.png

PS:和上面那个设置差很少软件安装直接设置一个路径就OK了,我是安装在E盘下的E:\ProgramFiles\MarkDown,固然默认也能够,可是须要你记住路径便可。

4、环境变量配置

一、右击属性电脑—>属性打开—>高级系统设置——->环境变量—>path,点击编辑在里面,输入你的NodeJS的安装路径便可,E:\ProgramFiles\NodeJs是个人NodeJs的安装目录,__注意:__你配环境变量的时候要配你本身安装的目录。配环境变量是为了让windows的命令行能调用到NodeJS里面的命令。

环境变量.png
环境变量配置.png

二、安装Hexo __第一步:__打开命令行

在键盘中直接按下win+R键打开运行窗口,输入cmd打开命令行
复制代码

__第二步:__进入安装NodeJs路径

nodejs路径.png

__第三步:__开始安装hexo,利用 npm 命令便可安装。

npm install -g hexo
复制代码

安装hexo.png

开始搭建博客

稍做等待,便可安装成功。接下来,执行

mkdir blog && cd blog
复制代码

此处blog即是你的博客目录,固然其余什么名字也是极好的,看心情了,此时最好将此目录备份到云盘或者其余地方,以防文件夹丢失后博客就没有了。

而后执行

hexo init
复制代码

安装依赖包

npm install
复制代码

至此,博客搭建成功!固然,仅仅是本地的了。此时执行

hexo g
复制代码

便可生成静态页面,而后执行

hexo s
复制代码

访问http://localhost:4000便可看到你的博客(运行了是这样的以下图所示)。

hexo页面.png

若是想让放到网上该怎么办呢?那就接着往下看咯。__注意:__暂时别关你的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”的绿色按钮。

image

通过邮箱认证后,该帐号就会被激活的。

  • 二、建立一个仓库

建立仓库.png
建立仓库1.png

:Github Pages的Repository名字是特定的,好比我Github帐号是muyishuangfeng,那么我Github Pages Repository名字就是muyishuangfeng.github.io(由于我以前建立过本身的我的博客了因此输入muyishuangfeng.github.io时是已经存在的__以下图所示__,为了说明因此多加了一个s)。

建立仓库2.png

  • 三、设置github pages

建立成功后,回到主页面,点击进入你刚刚建立好的仓库

gitpages.png

接着点击settings,进入仓库管理

gitpages.png

选择主题并发布

选择主题.png

主题.png

更新你的站点(点击连接便可进入,__注意:__这里为了让你们看清楚效果,申请了另一个帐号进行演示的,其实都是同样的。)

更新站点.png

至此,你的github pages就发布成功了。试试在浏览器的地址栏输入”你github的用户名.github.io”吧! 个人效果以下图所示:(比较丑,固然这尚未结束)

站点效果.png

如今回到你的 github仓库,而且复制地址

复制仓库地址.png

打开你安装好的NodeJS的根目录,而后点击进入刚刚新建的blog文件夹:(右击_config.yml打开配置文件)

打开配置文件.png

配置.png
__注意:__地址是你本身的地址。

  • 四、 更新 接下来,回到你的cmd窗口,只需执行两个命令:

    npm install hexo-deployer-git --save (这命令是为了解决hexo新版本的部署问题)
    
     hexo g 回车 (这是从新生成blog)
    
     hexo d 回车 (这是将本地blog部署到github的仓库)
    
     如今,试试在浏览器的地址栏输入:“你的用户名.github.io”,此时,你应该会看到这样的界面(我这个 经配置过样式的博客):
    复制代码

我的博客.png

6、主题配置

接下来,开始对博客进行一番改造。毕竟博客是本身精神上的一个家园,固然要装饰打造一番了。

首先嘛,天然是进行主题的选择了,主题在这里。选择好一个主题以后,就是进行主题的安装了。在刚刚那个网站上,点击右边的连接能够看到主题的Demo,选则一个喜欢的主题而后点击左边的连接进入github上:(我这里的是NexT)

样式.png
clone 主题样式

主题设置.png

第一步:克隆主题到本地 themes目录下

而后命令行进入到你的博客目录的themes目录下:

image

点击鼠标右键,打开github bash执行下面语句:

git clone主题 或者 git clone github.com/iissnan/hex…

(这个是刚刚那个页面的Install下的命令 )

clone样式.png

next.png

QQ图片20180520215416.png

其中git clone后面的连接为你进入的主题的连接地址,themes/NexT为你的保存目录,此处以NexT主题为栗子,具体的以你选择的主题为准。

第二步:配置你将要生成的博客主题为刚刚克隆的主题

而后进入到/blog/_config.yml里面,将theme改成你刚刚下载保存的主题的名字,我这里是NexT。

主题.png

而后回到命令行,执行:

hexo g 回车 (这是从新生成blog)

 hexo d 回车 (这是将本地blog部署到github的仓库)
复制代码

好了,试试在浏览器的地址栏输入:“你的github用户名.github.io”,你将会看到以下主题的blog页面/:

我的博客.png

编写与发布博客

编写博客.png

博客文章.png

markdown.png

怎么发布到github的博客呢?仍是老样子啊:

同步.png

保存.png

接着:

总结:

终于奋战了好几个小时一份热乎的搭建博客的文章出来了,这里须要感谢开源网站和各类好用软件的支持了。 感谢冯皓林的 《Hexo+github搭建我的博客》 感谢 GitHub、Git、NodeJs 若是有写的不对的地方还请各位不吝赐教。 个人简书 个人掘金 个人github 个人我的博客

小弟就厚着脸皮说欢迎关注哈

相关文章
相关标签/搜索