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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

silence木易 2018-05-20 21:44:00 浏览512
展开阅读全文

一、前提:

     一直想着写一篇关于搭建个人博客的文章,但是最近总是被各种琐事缠身,抽不开身。
 PS:(其实还不是因为自己最近懒了,手动捂脸),今天终于有时间来写一篇文章了。网上
 有很多关于搭建个人博客的文章,有的需要购买域名有的需要买服务器,并且需要收费,本着
 绿色无污染(免费)的原则,来开始我们的旅程。

二、准备条件

img_7b36d5f4ec80b67cac1a88a76e6b0a89.png
hexo.png
  • NodeJs

         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等内置对象。
    
  • Hexo

    Hexo 是一款基于Node.js、快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 官网及文档

  • github

    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.(摘自官方文档)
    英文有限,我就直接翻译一下,可能会有点辣眼睛

     GitHub 是 Git 存储库的最大主机, 是数以百万计的开发人员和项目协作的中心点。所有 git 存储库中有很大一部分驻留在 GitHub 上, 
    许多开源项目都使用它来进行 git 托管、问题跟踪、代码审阅和其他操作。因此, 虽然它不是 Git 开源项目的直接部分, 但在使用 Git 的
    专业性时, 您可能希望或需要与 GitHub 进行交互。 
    
  • Markdown

      Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。它允许人们“使用易读易写的纯文本格式编写文档,
    然后转换成有效的XHTML(或者HTML)文档”。[1]这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
    
    优点:
    
    1、简单,容易上手
    2、纯文本实现,程序员最爱,容易扩展,方便和其他工具联动
    3、平台支持广:以Github为首的各种平台、各种博客都支持,基本上现在面向程序员的输入框都可以用Markdown来写了
    4、丰富的工具链
    5、编辑器:各种支持所见即所得的编辑器
    6、和各种其他格式互相转化的工具。PDF、Mobi、Epub、HTML等等,几乎你能想到的所有格式它都能转换。
    

三、软件安装

  • NodeJS 下载地址

    img_4cd12e42ad88f0bcc78ee55cbb6a3c75.png
    NodeJs.png

    PS:软件安装直接设置一个路径就OK了,我是安装在E盘下的E:\ProgramFiles\NodeJs中,当然默认也可以,但是需要你记住路径即可。

  • git 下载地址

    img_30e9ddee9241b69f3b900ee5ae968df6.png
    git.png

    PS:和上面那个设置差不多软件安装直接设置一个路径就OK了,我是安装在E盘下的E:\ProgramFiles\git,当然默认也可以,但是需要你记住路径即可。

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

img_caee2883d919e8e1493f5ab285a86d07.png
MarkDown.png

PS:和上面那个设置差不多软件安装直接设置一个路径就OK了,我是安装在E盘下的E:\ProgramFiles\MarkDown,当然默认也可以,但是需要你记住路径即可。

四、环境变量配置

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

img_4d20fc68d9f8ae3f624f7ae5ffdc03aa.png
环境变量.png

img_2e1a71ec52d74229c84559900c5d6613.png
环境变量配置.png

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

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

第二步:进入安装NodeJs路径

img_39723fc82964e106a99c29ecfb7e1829.png
nodejs路径.png

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

npm install -g hexo
img_49b77fadc0803925237b2e7eb7b4ef7b.png
安装hexo.png

开始搭建博客

稍作等待,即可安装成功。接下来,执行

  mkdir blog && cd blog

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

然后执行

hexo init

安装依赖包

 npm install

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

 hexo g

即可生成静态页面,然后执行

 hexo s

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

img_ab04e3abcb10bf39683a08dddb3a8214.png
hexo页面.png

如果想让放到网上该怎么办呢?那就接着往下看咯。注意:暂时别关你的cmd窗口。

五、部署博客到github

  • 1、注册账号

The first thing you need to do is set up a free user account. Simply visithttps://github.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”的绿色按钮。

img_2c3fbbe00988d4ec287e5d6c2ac1cd09.png
image

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

  • 2、创建一个仓库
img_015470e75dd99dd77c72b1433149dfaa.png
创建仓库.png

img_5af41af21934fecbb0fb1216d0528df1.png
创建仓库1.png

:Github Pages的Repository名字是特定的,比如我Github账号是muyishuangfeng,那么我Github Pages Repository名字就是muyishuangfeng.github.io(因为我之前创建过自己的个人博客了所以输入muyishuangfeng.github.io时是已经存在的如下图所示,为了说明所以多加了一个s)。

img_d2b748b123d2af5803fa91a77b8dfec3.png
创建仓库2.png

  • 3、设置github pages

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

img_df2b91f528396e28c8cc16c9cb8b7935.png
gitpages.png

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


img_b8852f9e226815dafdf2a2ca0e32a995.png
gitpages.png

选择主题并发布

img_ddad54f944381b1ef03754d9553618fe.png
选择主题.png
img_e23564e4f5540c278013fd38266c9f3c.png
主题.png

更新你的站点(点击链接即可进入,注意:这里为了让大家看清楚效果,申请了另外一个账号进行演示的,其实都是一样的。)

img_3b0e14c3e199e69c191ad5c52a0d2d18.png
更新站点.png

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


img_cdec576465d494188a6914772683e4e6.png
站点效果.png

现在回到你的 github仓库,并且复制地址


img_610e817b3414f183028e198d1921fae5.png
复制仓库地址.png

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


img_2ebe6d538e01090f671c561e300089e7.png
打开配置文件.png

img_b5bdea80968bcb4e55e67da3bb907f4f.png
配置.png

注意:地址是你自己的地址。

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

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

六、主题配置

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

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

img_eedd4ba82ef046f47bdddeb09a30f15a.png
样式.png

clone 主题样式

img_f38eb658f24ed31b558f1c577a3a9945.png
主题设置.png

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

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

img_417801ecacb4b0f321ba2b79249c5e5b.png
image

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

git clone主题
或者
git clone https://github.com/iissnan/hexo-theme-next.git

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

img_572c2b38b54588dd2575992515235072.png
clone样式.png
img_ffbc7289b00e4a2d0856a8d7edaa9fab.png
next.png
img_593378e487310047b21c1518602e3c8b.png
QQ图片20180520215416.png

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

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

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

img_8715a8906c25bcfe3c3e9dd53f81131f.png
主题.png

然后回到命令行,执行:

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

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

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

img_d33209b0af6d6763820b68780d3f5aea.png
个人博客.png

编写与发布博客

img_c57f1e5c20546eb02e3371a2a2d91c5d.png
编写博客.png
img_ed431e9072a9c656f08ab7774c8767de.png
博客文章.png
img_8bac4a8ebe726c3c9f8b931ff76c6e19.png
markdown.png

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

img_a4953d3cb22dee41fe8a329780f01dc0.png
同步.png
img_0bdc4fd44382efb3e37050f525f18d82.png
保存.png

接着:

总结:

终于奋战了好几个小时一份热乎的搭建博客的文章出来了,这里需要感谢开源网站和各种好用软件的支持了。
感谢冯皓林的 《Hexo+github搭建个人博客》
感谢 GitHub、Git、NodeJs
如果有写的不对的地方还请各位不吝赐教。
我的简书
我的掘金
我的github
我的个人博客
小弟就厚着脸皮说欢迎关注哈

网友评论

登录后评论
0/500
评论
silence木易
+ 关注