创建个人博客详细流程

作者: sindri的小巢 | 来源:发表于2015-11-07 15:24 被阅读7423次

    最近自己瞎搞了一个个人博客,个人觉得还不错,决定把制作博客的过程写下来,帮助想要构建自己博客的朋友们。

    准备工作

    首先,我们需要在github上面创建一个账号。如果你还没有github账号,那么可以在首页进行快速注册


    填写完成确定信息没有重复的情况下,点击下面的Sign up for Github按钮,然后跳转到新界面。新界面用来选择是否进行付费购买github的仓库加密服务,如果你希望托管在github上面的项目不是开源的,那么选择付费很有必要。

    这里默认选择了free免费,我们滑动到网页下面选择绿色按钮就可以注册成功了。注册完成后进行界面内,我们可以通过右下角的New按钮进行邮箱认证,认证完成后点击认证链接跳转到这个界面

    到了这一步,我们博客的准备工作就完成了。


    创建github博客

    我们点击上图的New repository创建新项目,项目名称必须为github名字.github.io,比如本文中的github名称为SindriLinGithubTest,那么新仓库的名字必须为SindriLinGithubTest .github.io


    按照图上的信息填写之后,我们完成了博客仓库的搭建,接着要进行下一步的配置
    1、 对博客仓库进行配置


    2、第一次配置博客


    3、创建博客页面


    4、选择博客主题(生成css、html等文件帮我们构建博客,可以对这些文件进行修改)

    5、在浏览器上访问SindriLinGithubTest.github.io地址

    6、在博客仓库下面的文件中修改博客布局,显示内容等。通过博客显示内容和这些文件内容对比进行修改


    现在你的博客已经搭建完毕,可以给你的好朋友看看了

    7、怎么删除我们存在的仓库呢?如果我们要使用别人已存在的主题进行博客搭建,那么我们上面创建的仓库就要删除,删除仓库要在Settings里面删除




    快速定制主题

    通过上面的方式我们创建了自己的博客,但是对于不懂html/css的人(比如我)来说,定制博客是一个苦恼的问题。然而,现在我们不用再担心这个问题了。jekyllthemes是一个简单的静态博客网站工具,我们可以在这个网站上面寻找我们喜欢的主题下载后直接使用。


    博主我现在使用的模板是其中的Twenty主题,点击你想要的主题,然后进行下载
    下载之后我们要做的步骤如下
    1、修改主题文件名为github名字.github.io
    2、通过github工具上传到你的github仓库(注意仓库里面同名的博客仓库文件要删除),如果你没有也不想下载github工具,那么可以参考这篇文章来使用命令行上传文件到服务器

    3、登录github网站修改包括index.html,_config.yml等博客布局文件(这里上传成功后github博客页面已经发生改变,根据页面信息到下面相应的文件中进行修改)

    4、修改完成博客效果



    域名绑定

    现在博客虽然已经搭建好了,但是访问地址看起来总是不舒服的,我们想要通过指定的地址访问怎么办呢?我们需要拥有一个自己的域名,登录万网可以进行域名购买


    我们在购买域名前输入想要的域名进行检测是否存在,如果域名处于可购买状态,我们注册万网账号,然后把域名加入购买清单,进行付款购买。博主已经购买了sindrilin.com这个域名(com价格比net贵,各位酌情购买。博主的域名是三年$149)

    完成域名购买之后,我们还需要对域名进行解析,使之有效并且和我们的博客关联在一起
    1、我们要进入产品管理界面,选择域名,然后对我们已经购买的域名进行解析
    2、进入github pages界面,选择右上角的Pages Help,然后选择绑定博客DNS和域名



    3、进行域名解析,纪录类型为A,主机纪录包括@www两种,记录值为上面两个DNS中其中一个(这里我添加了两次解析)


    4、打开github仓库,在博客仓库目录下新增文件,命名为CNAME,并且写入购买的域名


    5、更改博客仓库的_config.yml配置,设置url为购买域名地址

    6、保存配置后,点击仓库的Settings,如果出现链接地址是蓝色的,那么说明博客跟域名已经关联好了,等待几分钟就可以通过自己购买的域名进行访问

    新博客

    正常来说,在我们下载的主题里面有个_posts文件夹,这里面存放的是博客文章,正常而言是md(markdown)格式。我的建议是不要删除这些文件,我们的博客可以在这些文件的格式上进行修改书写。
    这里我使用的markdown编辑器是typora,个人觉得这个markdown编辑器简洁好用。选择_posts目录下随便一个md文件右键使用typora打开,文件中红框勾选起来的部分千万不要随意删除,可以进行修改。如果不小心删除了可能会导致博客无法显示或者你的博客页面错乱等问题


    完成博客后,直接保存在_posts文件下,然后使用github for mac,然后提交修改,点击右上角的sync进行文件同步,再过一会博客就更新了。另外博客图片可以放在仓库的images文件下使用html语句进行获取

    怎么更换主题

    在完成上面的操作之后,正常来说我们已经搭建好了我们的博客和主题,在确认之前应该让你的朋友访问一下仓库域名确认,如果出现了



    这就说明你的博客主题搭建失败,这个主题是没用的。那么这时候我们需要删除github上面的仓库




    成功删除github上面托管的博客仓库之后,我们还需要移除本地github工具上面的博客文件

    右键项目 -> Remove
    完成之后我们下载新的主题,然后按照上面的方式重新提交,直到我们选择的主题能够访问为止


    更多

    由于本文创建的博客服务器位于github,在进行访问的时候加载速度可能不够高。如果是追求完美主义者,可以在万网上购买阿里的云服务器,然后找个会后台开发的小伙伴们一起开发共用服务器。
    其他资源:
    markdown语法
    阿里云服务器购买
    笔者博客
    笔者Github

    文集:开发日记

    相关文章

      网友评论

      • 死亡边缘的勇气:感觉好难啊,方便沟通一下不?
        sindri的小巢:emm,现在的图片资源丢了,你直接搜索github+jekyll搭建博客吧
      • Tchenv:纯小白,根据你的步骤弄出来了 tchenv.xyz
      • zhouluyao:技术积累
      • nuclear:博主你好,我在_post添加了自己的博客,github上面可以看得到文件,但是自己的博客上面看不见,知道是什么原因么?
        nuclear:@Sindri的小巢 确实是同步问题,早上起来的时候就看得到了,起先一直以为是哪里设置错了
        sindri的小巢:@nuclear 走时候会这样,我的博客有些文章也是更新不同步
      • 王颖博:博主你好,我现在有个问题,我的域名也解析出来了,是这个:http://wangyingbo.top/,可以访问。但是有个问题是,我从jekyllthemes下载的主题改过名字后已经上传到github的仓库里了,可是博客主页还是刚开始配置的那个主页模板,并不是jekyllthemes里下载上传后的模板,具体什么原因你能给说下么?太感谢了。。方便的话请留个联系qq,方便向您请教。
        王颖博:@Sindri的小巢 谢谢及时回复。我刚清除了一下缓存,也是不行,而且我在github仓库里吧index.html也换掉了换成了我的简历,不过博客主页还是原来的那个没有动。我决定重新走一遍流程,不用github配置好的模板,直接上传jekyllthemes的试试。
        sindri的小巢:@王颖博 首先,每次更改主题以后需要清空历史记录,你这个最大原因是浏览器缓存导致的。清空缓存之后如果打开404,就是主题可能无效
        王颖博:@王颖博 github的仓库文件结构是这样:https://github.com/wangyingbo/wangyingbo.github.io
      • 天空没有太阳:给力!OK了,感谢
      • f9599b9c7beb:我的也是404啊,为什么??
        github page:bulandent.github.io,可以正常看到,说明这块成功了。
        域名:doitchp.com
        然后设置的域名解析:CNAME www 默认 bulandent.github.io
        然后就404了。哪里设置错了?
        sindri的小巢:哈哈,我也是百度域名解析,这个不太清楚
        f9599b9c7beb:@Sindri的小巢 我刚换成A类型解析就可以了。CNAME不知道为什么不可以。
        sindri的小巢:说明主题存在问题要换一个
      • 六月的第三天:请问 我怎么按照你的教程做了之后 到第 5 步的时候 那个连接验证 显示404错误
        sindri的小巢:你的域名没有设置好
      • 郭清枫:很详细,正准备弄一个微博,正在学习ios开发
      • 垃圾___垃圾:失败了=
        sindri的小巢:@驿路梨花开 怎么失败的?网页打不开?
      • 二挠:选择完主题 点击publish page 生成链接 点击 404 啥情况 提示 There isn't a GitHub Pages site here.

        If you're trying to publish one, read the full documentation to learn how to set up GitHub Pages for your repository, organization, or user account.
        看设置里面 显示的是 Your site is ready to be published at http://zhangjianqianger.github.io/zhangjianqiang.github.io.
      • yehot:赞!抽空也弄个玩玩
      • 光明程辉:很全面,学习了!赞! :smile:
        sindri的小巢:@何程辉 嗯嗯

      本文标题:创建个人博客详细流程

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