简单的个人博客系统源码 个人博客系统源码

各位老铁们好，相信很多人对简单的个人博客系统源码都不是特别的了解，因此呢，今天就来为大家分享下关于简单的个人博客系统源码以及个人博客系统源码的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

如何在github上搭建个人博客

一、为什么在GitHub上托管个人博客

为什么在GitHub上托管博客，这个问题可以分两步来问：

首先，为什么可以在GitHub上托管博客？

GitHub是一个基于git的版本托管服务网站，上面聚集着几乎全世界的程序大牛，还有着大量的牛逼开源项目。而项目一旦成长壮大，一个简单的名称和一段描述很可能就无法满足作者与读者的需要。此时，GitHub Pages就应运而生，它允许用户用更具描述性的自定义页面代替源码列表。同时，用户也可以利用其作为个人或组织主页，将静态网页托管其上。

那么，在有着WordPress等等大量的开源博客系统的情况下，为什么选择在GitHub上托管博客呢？

对程序猿来说无比亲切，光是看起来感觉就很牛逼的"Git驱动式博客开发与发布流程"。

超级容易，5分钟包学包会的发布方式。

静态页面，建立简单，几乎没有安全性隐患，当然这也是缺点之一，静态页面无法做到太过复杂的交互设计和网站结构。不过作为一个简单的个人博客，也不太会有这样的需求

免费而可靠

更加详细的内容可以参见这里 todo: Jekyll+ GitHub Pages的优点与缺点

话不多说，现在就来试试看。

<p id="002"></p>

二、10分钟快速搭建一个博客原型

首先确认：

拥有一个GitHub账号

已经安装 Git，（在Windows下，个人推荐直接安装 GitExtensions，有中文界面，并且集成了git+ putty+ kDiff，比较省心一点啦）

1.建立一个项目

先在GitHub创建一个项目，名字随意，尽量全部小写字母，避免随后会碰到的URL冲突问题

本地运行Git，随意选个目录，将刚才创建的项目clone下来

<!-- lang: bash-->

cd/d/

git clone

cd blogdemo

<br/>

<br/>

2.建立配置文件_config.yml

注意：之后建立的所有文档务必使用UTF-8无 BOM的编码保存

在项目的根目录下新建文件 _config.yml，填写 baseurl:/blogdemo， blogdemo是你的项目名称，这一行内容规定了整个网站的根路径，稍后会详细解释这样做的意义。

<br/>

<br/>

3.建立主页

在根目录下新建文件 index.html，内容像这样：

<!-- lang: html-->

---

title: Hello, My Blog

---

{{ page.title}}

先不用急着奇怪为什么一个html文件会出现"{}"这样的标签，这里使用的是 Liquid模板语言，{{ page.title}}表示“本页面的标题”，更详细的介绍我们以后再讲，不妨这样理解：

<!-- lang: python-->

#--- begin of page's head

title="Hello, My Blog"

#--- end of page's head

print(page.title)

OK，那么博客主页设计完毕！（别吵...我答应过你要10分钟内搭建完成的...先弄个毛胚房意思意思，美化啊功能啊什么的晚点再说）

<br/>

<br/>

4.发布到GitHub

回到git bash,检查一下 git status，确认 _config.yml与 index.html无误后 add，commit，保持使用Git的良好习惯，记得添加提交描述

然后推送到GitHub，这里注意，因为我们使用的是GitHub Pages中的 Project Pages, GitHub仅会将分支 gh-pages下的内容进行自动生成操作，所以本地的 master分支应推送到远端的 gh-pages分支

<!-- lang: bash-->

git push origin master:gh-pages

稍微等待一下，最多10分钟（通常不用那么久啦），访问 yourname.github.com/blogdemo

，（其中 yourname

是你的GitHub帐户名，blogdemo则是你的项目名）就会看见你的博客主页（确实很丑...而且完全不像一个博客的样子，不过别急，慢慢来比较

快~）

另外，如果不幸发现你的中文页面出现了乱码的情况，别着急，还是该死的UTF-8问题，后面我们会一劳永逸的解决他的，暂时先手动调整一下浏览器的编码。

<br/>

<br/>

5.在_posts内撰写文章，并在首页加入文章列表

在这段时间里，我们继续为你的博客添砖加瓦，让他拥有最基本的文章阅读功能，另外不断F5页面的同时也可以关注一下自己在GitHub注册时所用的邮箱，如果之前推送的内容有误的话，GitHub将以邮件形式提醒你生成失败。

回到项目根目录， mkdir _posts新建一个目录，看名字也知道啦，这里存放你所有的文章。

进入_posts目录，新建一篇文章。注意默认的文件名格式是 year-month-day-postTitle这样。比如 2013-03-23-my_first_article.md，尽量避免空格或者其他乱七八糟的字符，这个文件名将作为URL的生成依据。文件名的格式可以通过修改 _config.yml中的 permalink属性而改变，默认值为 date，也就是我们刚刚创建的文件的样子，具体的规则可以看这里，后面我们也会讲到。

如果你发现了我刚才创建的文件后缀名是.md，熟悉GitHub或者StackOverFlow的朋友应该知道Markdown格式，推荐使用GitHub托管博客的原因之一也正是如此，我们可以在大部分时候避开恼人的HTML，转而使用更加直观的Markdown语法。如果不熟悉也没关系，可以参见这份Markdown语法说明，应该说是相当易学，并且在熟悉之后非常易用的。

回到主题，打开刚才创建的文件，输入如下内容：

<!-- lang: html-->

---

title:我的第一篇文章

---

#{{ page.title}}

##目录

+ [第一部分](#partI)

+ [第二部分](#partII)

+ [第三部分](#partIII)

----------------------------------

##第一部分<p id="partI"></p>

这里是第一部分的内容

----------------------------------

##第二部分<p id="partII"></p>

这里是第二部分的内容

----------------------------------

##第三部分<p id="partIII"></p>

这里是第三部分的内容

{{ page.date|date_to_string}}

这段内容中使用了最常用的几种Markdown语法，比如使用#，##表示 HTML中的<h1></h1>,<h2></h2>。使用[text](link)创建超链接，使用连续多个-创建水平线（注意：不包括最上端包围title所使用的横线，那里表示一个页面的“头属性”），等等。更多详细的语法可以在之前提到的页面查询，这里不再赘述，总之，这是一种更加贴近真实写作的语法，推荐大家尝试。

啊对了，最后面的那个{{ page.date|date_to_string}}是指显示本页的日期属性，并且转换为可读的字符串形式。同样也是Liquid语法。

OK，那么第一篇文章也写好了，再把最新的repo推送到github，稍等片刻，就可以...等下，忘记给文章加上入口的链接了。

Sorry啦，重新打开我们的 index.html文件，添加内容，变成下面这样：

<!-- lang: html-->

---

title: My Blog

---

{{ page.title}}

{% for post in site.posts%}

{{ post.date|date_to_string}}<a href='{{ site.baseurl}}{{ post.url}}'>{{ post.title}}</a>

{% endfor%}

唔...都是Liquid的内容，简单解释一下，Liquid标记最主要分为两种，一种是直接输出变量内容，像这样：

{{ page.title}}

另一种则是逻辑命令形式的，像这样：

{% for x in y%}...{% endfor%}

而刚才写进主页的内容，就是遍历所有post文件，然后逐一显示在页面上，这里需要注意的一点就是在创建文章的超链接时，除了 post.url之外，也要注意在前面加上site.url

，原因前面也有提到过，我们正在创建的是 Project Pages

类型的网站，其最终生成的网址根目录是：username.github.com/projectname，而 post.url

生成的超链接仅仅会自动加上 username.github.com/这样的前缀。

现在检查一下更改的所有内容，确认不要犯下愚蠢的错误，比如把"."打成"。"或者单词拼错之类的，提交并推送！

当当！如果一切顺利，就能看到你的首页外加文章列表闪亮登场。

<br/>

<br/>

6.增加模板套装_layouts

文章进行到这里，或许开头承诺的10分钟已经超过不少了...很抱歉我欺骗了你，不过至少我们进展很快～接下来——如果你仍有兴趣的话，让我们为网站增加一些统一性的风格设置。

回到项目根目录，新建文件夹 _layouts，顾名思义，“布局”是也。在 _layouts中新建一个最基本的布局文件，姑且命名为default.html好了：

<!-- lang: html-->

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>{{ page.title}}</title>

</head>

<body>

{{ content}}

</body>

</html>

诺，首先解决了UTF-8的编码问题，随后指定了正文内容的位置，当然在这里只是一个最简单的内容，在body内仅有一个{{ content}}标签，你可以根据自己的喜好对页面进行任何改动，只要记得保留这个内容标签在你想要的位置就好。

然后我们修改index.html和刚写完的那篇文章，只要在头属性上加一句就好：

<!-- lang: html-->

---

title: xxoo

layout: default.html

---

我们当然还可以把这个结构变得更灵活一些，比如继续新增两个模板分别叫做l_post.html与

l_index.html，他们首先引用default.html，但在其基础上做出一定的修改。然后首页使用l_index模板，而所有的post文件

则使用l_post模板，等等等等，请随意发挥。但始终记得加上{{ content}}标签

再次推送到服务端，查看效果。

至少这一点我没骗你，要发布最新的更改实在是太简单了，只需要一次push而已。

那么，基本的项目结构如下：

.

|-- _config.yml

|-- _includes

|-- _layouts

||-- default.html

| `-- post.html

|-- _posts

||-- 2007-10-29-why-every-programmer-should-play-nethack.textile

| `-- 2009-04-26-barcamp-boston-4-roundup.textile

|-- _site

`-- index.html

这幅图来自于：Yes We Jekyll，原谅我的懒惰，我实在不擅长排版...

请问谁有个人网站制作源代码

这一类的东西很多，

自己去搜索吧！

网站设计八步骤

由于目前所见即所得类型的工具越来越多，使用也越来越方便，所以制作网页已经变成了一件轻松的工作，不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页，于是他们认为网页制作非常简单，就匆匆忙忙制作自己的网站，可是做出来之后与别人一比，才发现自己的网站非常粗糙，这是为什么呢常言道：“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你不可能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没这个精力，所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做到大而全、精而深。

二、搜集材料

明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

三、规划网站

一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。如何规划网站的每一项具体内容，我们在下面会有详细介绍。四、选择合适的制作工具

尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool3d、GifAnimator等；还有网页特效工具，如有声有色等，网上有许多这方面的软件，你可以根据需要灵活运用。

五、制作网页

材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。

六、上传测试

网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，现在上传的工具有很多，有些网页制作工具本身就带有FTP功能，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友，让他们来浏览。

七、推广宣传

八、维护更新

网站要注意经常维护更新内容，保持内容的新鲜，不要一做好就放在那儿不变了，只有不断地给它补充新的内容，才能够吸引住浏览者

★要想学做网页，首先得了解制作网页的工具。

制作网页主要有以下一些工具

Frontpage：office自带的一个工具，操作简单，实用，学起来比较轻松，功能不咋地，我不太喜欢。

Dreamweaver：这是网页三剑客之一，专门制作网页的工具，可以自动将网页生成代码，是普通网页制作者的首选工具，界面简单，实用功能比较强大。建议初学者选用。

另外一个工具就是代码编辑工具，例如写字本、EditPlus等，这些工具主要编辑asp等动态网页。

此外还有一些网络编程工具，javascript、java编辑器等。

网页制作也是一个比较吃香的行业，要真正做一个好的网站，还必须有良好的设计功底。所以还得学很多边缘性的软件，例如photoshop、flash等。

大型的网站往往还需要数据库的支持，所以还得懂数据库。sql、甲骨文等。

总之，掌握好网页制作，能独立完成一个网站的制作工作，那就不要考虑吃饭问题。随便混就好了！

祝你成功。

WordPress搭建个人博客小白教程

我想这问题应该问你自己，每个人都应该有自己的想法，对于我而言，作为一名计算机专业的学生，我想建博客完全是专业的原因与兴趣的热爱，我在最近的课程中是基于B/S的web开发，因为老师为了让我们熟悉开发流程让我们自己做了个项目，为了更好的演示项目所以购买了阿里云主机，交接成果后服务器就空着吗？之前有一次项目实训老师问我们谁搭建过个人博客，只有了了几个大佬有过类似经验，正好有这个机会何不搭建一个属于自己的网站呢？

文章具体步骤如下：

云服务器-----域名-----环境搭建-----部署源码

相信你一定在微信或者QQ空间看过腾讯的广告10块钱建站，一分钱购买域名。这就是我们要购买的云服务器。虽然我看过很多腾讯的广告，但我还是推荐阿里的服务器。IDC数据显示阿里云公有云市场份额达到48%，稳居中国市场第一。而且就我体验来看阿里云的各方面服务安全都有很好的保证与帮助。

直接去阿里云服务器ECS购买，如果是学生的话可以享受到阿里的云翼计划 10块钱一个月的主机价格。这对于服务器的价格来说是相当优惠的！

购买好了后呢阿里会给你一个ssh密码，记好这个密码。

你可以在阿里控制台的右上角点击云命令行连接自己的主机（就是这个橙色的标志）

点击后输入：

回车后输入刚刚给你的密码就能连上主机了

可选读，因为可以直接通过公网IP访问

别的教程都说域名很重要，一定要选，实际上你可以直接拿自己的公网IP当做访问地址进入系统。而且购买了域名就得对域名进行备案，这需要特别麻烦的步骤，时间也至少 10-20天。不过这里我还是说说吧，毕竟有一个好的域名进入比直接用IP酷很多。

购买域名很简单，一般的域名也很便宜一般7 8块钱就可以买一年了，当然也有特别贵的溢价域名就别购买了。

直接去阿里云万网购买就行。直接输入你想要的域名，选个便宜的购买，当然也是你可以接受的，需要注意的是首次购买域名是有优惠的，所以要选择合适的购买时长。购买完后需要域名的实名认证（这也挺麻烦的不，不过最麻烦的还在后面一步域名备案）。

（耗时10-20天左右）

这是我最想吐槽的地方了，因为中国工信部的原因你购买的域名必须要备案，不然就无法通过域名访问阿里的服务器，不过阿里还是很好了，只要你购买的服务器有三个月就可以享受阿里备案一条龙服务，别问我为啥要三个月，因为你在某讯家要运行三个月才能备案。（工信部备案需求是你要三个月运行，阿里默认你买了三个月就给你提前了）

在控制台下，右上角的备案进入备案系统。选择你的服务器进行备案申请。

你的域名需要解析到你的服务器才可以将这域名指向你的网站，直接在控制台的域名管理下面解析即可。要填的直接对照下面这张图添加就行，A默认，主机记录就是你前面的www,也可以是@，解析线路默认，记录值就是你的公网IP这里我的博客是 www.jianqiang.online,公网IP是47.100.114.250。

Ok,到现在为止，域名这方面就大功告成了，以后就有了专属域名。如果觉得这太麻烦了也可以直接通过IP访问，但如果购买了域名就必须得走到底，不然就浪费了

现在就需要接着前面连接主机后的操作了。有技术的可以直接操作Linux，这里因为是推荐给小白的教程所以选择搭建宝塔Linux管理系统。

宝塔面板是一款很优秀的Web环境面板，宝塔面板支持Linux和Windows系统，可以一键安装LNMP和LAMP环境(这是啥之后介绍)，是新手站长最好的管理界面。

Enter后系统会自动安装宝塔，运行期间需要输入y确认安装。等待大概2分钟左右，显示“Complete!”，即安装完毕！此时要记住控制台显示的密码，后面登录需要。

阿里云服务器需要开放下端口，因为阿里云为每台ECS服务器默认配置的安全组禁用了宝塔面板需要的端口，宝塔面板依赖的端口号有： 8888|888|80|443|20|21，所以需要登录到服务器控制台，开启这6个端口。可以去这里阿里云ECS怎么开放端口自定义安全组规则查看怎么开发端口。下面我也简述一下。

但你端口打开后就可以通过网站url访问宝塔面板了

登录地址为：http://你的服务器IP:8888

用户名：admin

密码：前面安装完成后你记下的密码

登录宝塔后台后，会弹出一键安装web环境的界面，我们按照自身需求安装适合自己的LNMP环境或者LAMP环境。你熟悉什么开发环境就用什么开发环境，都不熟悉推荐LNMP.

这个宝塔安装我也是从网上找的，这里把原博主文章发一下

宝塔面板支持一键部署源码，因此我们无需到WordPress网站下安装包。如下图。

注：如果软件中没有这选项就去侧边的软件管理里找。

这也就是我为什么前面云服务器推荐宝塔的原因，他甚至可以让你部署其他项目

部署完成后会出现下图提示，记住这些资料点击站点去访问进入WordPress安装操作。

接下来的站点配置界面就需要填写你自己的信息！

好了，文章到此结束，希望可以帮助到大家。