美文网首页
打造属于自己的博客系统

打造属于自己的博客系统

作者: crazyandcoder | 来源:发表于2019-12-13 18:36 被阅读0次

    前言

    以前写博客时用的是CSDN、 博客园、新浪博客之类的博客系统,这类博客系统好处就是什么都弄好了,自己只需要写文章即可,但是一类大缺点就是广告太多,打开一篇文章,基本满屏都是广告,让人看下去的愿望都没有,所以一直打算先搞个自己的博客系统,专门记录一下学习过程。

    我的博客链接:https://crazyandcoder.work/

    在这里插入图片描述

    正文

    关于hexo的简介请看官网介绍《详细介绍

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

    而我们要做的就是现在本地写好文章,然后解析成HTML文件,最后再部署到github上面显示出来,总的来说,过程还是蛮简单的,而且步骤也简单,只需要几条命令即可,下面我们来具体实现。

    搭建过程

    配置

    首先需要下载一些配置软件:

    1. hexo,生成本地的文章
    2. node.js ,用来生成静态页面的
    3. git ,把本地的hexo内容提交到github上去.
    4. 申请github账号 ,部署到博客
    5. 申请 阿里云 域名,绑定github.io

    注意: 这里面申请的github账号的名称就是以后你博客的域名,所以一定要起一个有个性的名字。

    安装node.js和git没有啥好说,直接下载软件安装即可,傻瓜式安装。

    下面来说一下安装hexo,需要用到以下的命令:

    npm install -g hexo-cli
    

    正常情况下,输入以上命令即可安装成功,测试一下,输入命令,显示版本号即表明安装成功,如果中间过程中出现任何问题,请自行百度解决

    C:\Windows\System32>hexo -v
    显示内容:
    Native thread-sleep not available.
    This will result in much slower performance, but it will still work.
    You should re-install spawn-sync or upgrade to the lastest version of node if po
    ssible.
    Check C:\Users\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-
    util\node_modules\cross-spawn\node_modules\spawn-sync\error.log for more details
    hexo-cli: 1.0.1
    os: Windows_NT 6.1.7601 win32 ia32
    http_parser: 1.0
    node: 0.10.29
    v8: 3.14.5.9
    ares: 1.9.0-DEV
    uv: 0.10.27
    zlib: 1.2.3
    modules: 11
    openssl: 1.0.1h
    

    运行博客系统

    以上软件安装好,我们就已经生成了一个博客系统,只不过这是最基础也是最简洁的博客系统,我们来测试一下。

    在本地磁盘新建一个目录,这以后就是我们写博客的地方啦譬如我在E盘新建一个hexo目录,同时进入到该目录下

    C:\Windows\System32>cd E:\hexo
    

    进行初始化一下:

    C:\Windows\System32>hexo init
    显示内容:
    E:\hexo>hexo init
    Native thread-sleep not available.
    This will result in much slower performance, but it will still work.
    You should re-install spawn-sync or upgrade to the lastest version of node if po
    ssible.
    Check C:\Users\liji\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-
    util\node_modules\cross-spawn\node_modules\spawn-sync\error.log for more details
    INFO  Cloning hexo-starter to E:\hexo
    Cloning into 'E:\hexo'...
    remote: Counting objects: 53, done.
    remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
    Unpacking objects: 100% (53/53), done.
    Checking connectivity... done.
    Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git
    ) registered for path 'themes/landscape'
    Cloning into 'themes/landscape'...
    remote: Counting objects: 724, done.
    Rremote: Total 724 (delta 0), reused 0 (delta 0), pack-reused 724eceiving object
    Receiving objects: 100% (724/724), 2.51
    Resolving deltas: 100% (381/381), done.
    Checking connectivity... done.
    Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e
    22468d38'
    

    这样就生成了一个默认的博客系统。
    我们来查看一下默认的博客系统是什么样子,
    输入以下命令:

    E:\hexo>hexo generate
    等待几秒结束后,输入
    E:\hexo>hexo s
    成功后会显示:
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
    

    我们在浏览器上面输入以上地址 http://localhost:4000/ 我们就会打开一个本地的HTML页面,这就是我们的博客原型,

    image

    不过这只能在本地访问,别人还是不能访问到,要想别人也能看到的话,接下来我们就要发布到github上面去。

    发布到GitHub

    那么问题来了,我们该如何发布到github上面呢?

    1、首先我们,需要在github上面新建一个账号,点击进入github官网注册一个账号,这个账号就对应我们的博客访问地址,譬如,我注册的账号就是crazyandcoder,那么我的博客访问地址就是http://crazyandcoder.github.io/

    2、新建一个repository,输入名字。


    在这里插入图片描述

    3、配置我们的hexo init生成的配置文件

    在这里插入图片描述

    4、在最后面添加我们刚刚新建的repository,里面的test就是我们刚刚创建的repository


    在这里插入图片描述

    5、最后发布

    hexo deploy
    

    测试,在浏览器中输入博客地址 http://账户名.github.io/ 就可以进行测试了,别人也可以访问了。

    总结:

    以后我们进行写文章到发布到我们的博客系统上去总共要经历一下几个步骤:

    1. hexo new ”postName” #新建文章
    2. hexo new page ”pageName” #新建页面
    3. hexo generate #生成静态页面至public目录
    4. hexo server #开启预览访问端口(默认端口4000,’ctrl + c’关闭server)
    5. hexo deploy #将.deploy目录部署到GitHub

    其中第一步在本地创建文章,会在本地博客目录下生成文章。


    在这里插入图片描述

    然后我们就可以打开文件,在里面写文章。

    写好文章后,我们需要将其生成HTML文件,如何生成,这就需要使用第三步的命令:

    hexo generate
    

    生成文章后,我们首先可以在本地预览一下,如果没有什么问题的话可以发布到github上面。使用以下命令:

    hexo depoly
    

    等待几秒即可发布完成

    博客主题选取

    以上就是用hexo + github搭建自己的博客系统的内容。最后附上一些常用的hexo主题,供大家自己选择:传送门+hexo主题

    绑定域名

    我自己用的域名是阿里云域名,很便宜,一年不到10块钱,很划算,接下来我们需要将上面http://账户名.github.io/ 绑定自己申请的域名上面,这样我们就可以直接访问域名就可以查看博客了。

    购买域名

    域名的话,我推荐阿里云,毕竟大公司,靠谱。我们购买域名的时候,首先需要查询一下,这个域名有没有被别人注册过。域名查询,到这个网址上面查询一下,如果没有被注册过,即表明你可以申请使用的。譬如,我们搜索jackboyblog.tech这个博客域名,没有被注册,你就可以购买,资金充足可以购买顶级域名,不然的可以选择一些普通的,譬如tech.work等。我自己的就是work,很便宜,才几块钱一年。

    在这里插入图片描述

    域名解析

    (1)在你的github博客仓库下创建一个名字为 CNAME的文件,在其中填写你的域名地址 ,注意 :不要包含Http://和www

    在这里插入图片描述

    注意: 不要包含Http://和www

    在这里插入图片描述
    (2)进入你的博客github仓库 ,点击settings,查看Custom domian这一项是否已经填写好并保存 在这里插入图片描述

    (3)解析你的域名,你可以在终端中ping一下你的 github博客的地址,得到ip


    在这里插入图片描述

    (4)进入域名解析控制台,点击解析,点击 添加纪录 ,记录类型选择A,主机记录填:www 记录值填你的IP TTL默认就好了(调大TTL值可以提高域名的解析稳定性和速度,如果近期要更改IP的话建议调小点)

    再点击 添加记录 记录类型选择A,主机记录填:@ 记录值填你的IP TTL默认就好了;

    在这里插入图片描述

    经过以上步骤,我们过个10分钟左右即可访问自己的域名博客了。我的是:https://crazyandcoder.work/

    在这里插入图片描述

    以上便是搭建自己博客系统所有的步骤,记录总结一下,有需要的朋友可以参考一下。

    关于作者

    专注于 Android 开发多年,喜欢写 blog 记录总结学习经验,blog 同步更新于本人的公众号,欢迎大家关注,一起交流学习~

    在这里插入图片描述

    相关文章

      网友评论

          本文标题:打造属于自己的博客系统

          本文链接:https://www.haomeiwen.com/subject/ykhqnctx.html