个人博客静态页面（如何在 GitHub 上写博客）

本文目录

• 如何在 GitHub 上写博客
• wordpress博客，怎么让主页是静态页面，而把原wordpress首页的内容（像文章之类）移到另外的页面
• 静态空间能用博客程序吗
• 我最近做了一个静态网页,写出了DIV+CSS，请问接下来要做成一个博客要做什么比如说要加程序，（详细）
• ASP生成静态页面的静态页面效果
• 博客型的网站，做成静态页面好，还是动态页面好因为万经常更新文章，求指教

如何在 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》 , 《h3》《/h3》。使用(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》
***隐藏网址***
《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，原谅我的懒惰，我实在不擅长排版...

wordpress博客，怎么让主页是静态页面，而把原wordpress首页的内容（像文章之类）移到另外的页面

找到你所用的主题模板文件夹，在里边直接新建一个页面，home.php 里边可以直接写静态代码，也就是你设计好的页面传上去就行了，打开博客首页就会是这个。
搞不清楚的话就直接写绝对路径

静态空间能用博客程序吗

静态的不行的。
自己做网页也只能是把写的文章一篇篇上传到空间。
另外很多博客功能也无法实现
现在有很多个人博客系统可以用的，不过都是动态，需要支持数据库的。

我最近做了一个静态网页,写出了DIV+CSS，请问接下来要做成一个博客要做什么比如说要加程序，（详细）

其实最简洁的方法就是 你使用BOLG程序进行修改。包括页面美工 等等！ 教程和免费得博客程序你可以百度一下！还有更简洁的方法 就是使用第三方提供的博客程序 例如 新浪 网易 等等！

ASP生成静态页面的静态页面效果

在三年前，有百分之八十的网站要求做成动态的。也就是从那个时候也就是ASP的发展高峰期。一些静态网页也要求做成动态网站。但是这二年来，网站要求做成静态的。也就是网页要求静态化。
为什么会有这样的变化？到底意味着什么？
目前网页HTML静态化是利用其它的动态技术生成HTML静态页面，还不是静态网站。因为的确是这样的，生成HTML静态网页有一定的好处。
一、加快页面打开浏览速度，静态页面无需连接数据库打开速度较动态页面有明显提高；
二、有利于搜索引擎优化SEO，Baidu、Google都会优先收录静态页面，不仅被收录的快还收录的全；
三、减轻服务器负担，浏览网页无需调用系统数据库；
四、网站更安全，HTML页面不会受Asp相关漏洞的影响；
观看一下大一点的网站基本全是静态页面，而且可以减少攻击，防sql注入。数据库出错时，不影响网站正常访问。
生成html文章虽操作上麻烦些，程序上繁杂些，但为了更利于搜索，为了速度更快些，更安全，这些牺牲还是值得的。
说法一:
1、省掉了服务器处理时间和调用数据库的时间,访问速度比一般动态网站快10-20倍；
2、不用调用数据库,服务器端的CPU调用大大减少,增加服务器的性能；
3、生成静态路径利用搜索引擎的抓取和收录；
4、在排名中静态页面的排名权重要高于动态路径的页面。
说法二:
1、安全，静态页面从理论上讲是没有攻击漏洞的；
2、没有数据库访问或减少服务器对数据响应的负荷，速度快；
3、优化引擎，易于搜索引擎收录，搜索引擎比较喜欢收录静态页面；
4、降低服务器的承受能力，因为其不需要解析就可以返回客户端，因此减少了服务器的工作量，同时也减少了数据库的成本；
5、有意义的文件名，提高了可用性(对中文似乎就没这个优势了吧) 。
说法三:
提问：ASP生成静态HTML后更有利于搜索引擎收录吗?为什么?
答：是的，静态HTML更有利于搜索引擎收录。
因为静态网页和动态网页的区别在于动态网页可以给于浏览者权限，而搜索引擎抓取的时候是以游客身份进入的，所以不容易被抓取和收录，而静态网页由于不存在页面权限问题，所以更容易被收录，相对来说如果你的动态页面没有加任何权限的话也同样容易被收录！例如不生成静态页面的博客ASP PHP .net CGI的论坛,只要没有访问权限限制都会被收录!
从以上的观点可以看出,生成静态页面的好处。现在知名、主流的大站基本上都静下来了。

博客型的网站，做成静态页面好，还是动态页面好因为万经常更新文章，求指教

动态页面最好。个人博客网站需要做下面这些准备
原料/工具
1.注册域名。最好能和博客有点关联
2.选择博客系统。例如wordpress，zblog，emblog等都可以。
3.选择云服务器，例如阿里或者腾讯等
4.解析域名到服务器
5.发布博客系统到云主机
以上步骤还是需要一些知识的。
步骤方法
一、先去域名注册商那里注册一个自己喜欢的域名，常用的域名注册商有：万网、新网、西部数码等；
二、需要选购租用一台服务器，考虑到是个人博客可以先选择使用虚拟主机；如果使用国内服务器或者虚拟主机的话，需要对域名进行备案，备案流程比较简单，可以联系服务器商代备即可。
三、网站程序，这里是一个网站的核心。个人博客网站建议选用网站博客程序，常用的有WordPress、zblog等。
四、对自己选好的网站程序本地搭建成网站，然后进行修改调整，使其成为自己专属的博客网站，本地搭建可以网上搜一下本地环境安装包来配置本地环境；再按照所用程序官方教程进行安装使用。
五、网站调整好以后，需要通过FTP等工具把网站程序上传到服务器；然后在服务器绑定自己注册的域名；再去域名服务商那里对域名解析，解析到自己服务器上。
六、等待域名解析生效后，在浏览器地址栏输入域名就可以访问自己的博客了，至此，个人博客网站建设完成。
注意事项
在本地设置好的网站，需要进行备份，然后通过数据库把自己修改的和添加的内容上传到服务器端使用。
老魏为此写过云服务器手动建站等多篇教程，看完有疑问可以问，在线了就回答。