个人网站源码下载后怎么安装（个人商城网站源码）

image

第一步 网站托管

我们晓得，一个网站要才能在任何地方都还能被访问，那么还要布署至服务器上。其实github就提供了这么的功能，只要依照github格式要求，新建一个库房，把你的网站代码上传至旁边，那么就可以在任何时侯任何地方都还能访问了，那么怎么搭建这个代码托管库房呢？

可参考官方链接，我这也把方法写下来。

1.首先你要至GitHub上注册一个帐户,例如我注册的用户名为：leach-chen（用户名可以在设置里改）

2.点击New repository–>输入库房名称格式为：用户名.github.io(如：leach-chen.github.io)->点击Create repository

image

image

3.浏览器里访问,可以发觉这个url可以被访问了，你可以把改库房拉取至本地，然后在上面改建一个index.html的文件,在里面键入任意内容，然后再把代码推送至git上，然后再访问改链接，可以发觉index.html上面的内容被访问至了。

到这儿，一个免费且无限流量的github代码托管库房就争创完成了。

第二步 Jekyll安装

首先解释下哪些是jekyll，jekyll相当于一个编译工具，安装好jekyll后，你可以通过jekyll争创一个网站模版，创建好以后，我们就可以通过:4000/访问昨天争创的网站了（具体jekyll用法上面再介绍），我们可以实时更改昨天争创的模版上面的内容，并可以实时通过本地url预览改动后的疗效。我们把这个博客推送至上一步争创的代码库房里，再通过就可以访问至博客上面的内容了。有了Jekyll，我们不用每天改动一点点就把代码推送至库房中进行预览，而是本地就可以预览。GitHub支持jekyll，hexo等时态解读。

那么怎么安装jekyll呢？我那边暂只讲解windows下的安装方法。

首先点击下载安装Ruby installer;

点击下载RubyGems,下载完成后解压到你想放的位置，例如我放在E:\Software\Install\StudySoftware\rubygems-2.7.4。 打开命令行执行：

cd E:\Software\Install\StudySoftware\rubygems-2.7.4 //踏入至解压包的位置

E:

ruby setup.rb

在命令行执行gem install jekyll；

安装完成，我们可以用jekyll命令争创一个博客模版,打开命令行执行：

cd d:

d:

jekyll new testblog

cd testblog

jekyll server

在浏览器键入:4000/即可浏览昨天争创的blog

到此jekyll 就安装完成了。

第三步 Jekyll 主题选择

上一步我们完成了jekyll的安装，默认争创的博客模版通常比较简略，jekyll官网提供了大量博客模版，我们可以去选购一个自己喜欢的博客模版，然后在这个博客基础上更改至满足自己需求的博客

点击抵达jekyll 主题官网

我选择的adam-blog这篇主题

点击Homepage可以链接至该blog Github页面个人网站源码下载后怎么安装，点击download可以下载该博客源码，点击demo可以预览该博客疗效

image

我们点击download，将该源码下载出来，命令行踏入该目录执行jekyll server，执行成功可以在控制台见到运行路径：

image

若下载的主题jekyll server执行失败，则用方法中学争创的testblog目录下的Gemfile，Gemfile.lock文件替换下载的主题旁边的该文件，若还不成功，则按照控制台提示的错误个人网站源码下载后怎么安装，可以百度至解决方案。 到此，我们早已选取了一个博客主题模版，接下来我们讲解下jekyll主题的目录结构

第四步 Jekyll 目录结构

jekyll目录结构主要包含如下目录：

_posts 博客内容

_pages 其他还要生成的网页，如About页

_layouts 网页排版模版

_includes 被模版包含的HTML花絮，可在_config.yml中更改位置

assets 辅助资源 css布局 js脚本 图片等

_data 动态数据

_sites 最终生成的静态网页

_config.yml 网站的一些配置信息

index.html 网站的入口

那么这种目录是怎样运作的呢？

我们打开根目录下的index.html可以看见：

—

layout: home-page

—

html代码段

上面的home-page我们至_layouts目录下可以找到：

image

实际上根目录下index.html运行后是home-page上面的代码内容，1中html代码段会填充的上图中的content位置

上图的default布局也可以再_layouts目录下找到：

image

实际上根目录下index.html运行后,home-page.html上面的代码内容会填充至上图中的content位置

jekyll是将分散在各个目录下的html文件条纹上去运行。

文章链接这儿有篇讲的比较好的，跟着该文章里的操作，能使你更熟悉

第五步 Jekyll 语法

上一步大约讲解了下Jekyll的目录结构，现在我们讲解下部份jekyll的句型，也可去官方网站学习更具体官方链接

{% for post in paginator.posts %} {% endfor %}表示一个for循环,百分号之间的句子为要执行的句子，该段代码表示分栏输出文章，分页人数在_config.yml中配置，注意：分页只在根目录下的index.html中有效

{ site.自定义数组名称 } 表示获取_config.yml旁边的自定义数组名称的值

{% for post in site.posts limit:2 %} {% endfor %}循环输出 2 篇文章

{% for post in site.posts offset:0 limit:2 %}循环输出最新2篇文章

{% for tag in post.tags %} {% endfor %}输出该篇文章里的tag

{% if link.type == site.blog_1 %} {% endfor %}字符串比较

| {% assign count = 0 %}****{% assign count = count | plus: 1 %}定义assign变量加1 |

{{post.content | strip_html | strip_newlines | truncate: 100 }}获取文章摘要，取前100个字符

2018-02-10-你要添加的描述.markdown，文章命名格式，否则辨识不了

{{ page.date | date: ‘%Y, %b %d’ }}输出文章日期

{{page.title}}输出文章标题

{% if post.jekyll %} 判断文章里的jekyll数组是否为true

{% if paginator.previous_page %}是否有上一页

{% if paginator.next_page %}是否有下一页

{{ paginator.previous_page_path }}上一页url

{{ paginator.next_page_path }}下一页url

| {{ post.url | prepend: site.baseurl }}要访问的文章的url |

第六步 修改博客模版

第四步中下载的博客模版发觉并不完全符合自己的需求，于是做了如下更改

1. 添加文章分类功能：

a. 在_config.yml中添加如下分类

image

b. 在_includes目录下的header.html上面添加如下代码，该代码是循环输出分类及该分类下的文章数目

image

c.在根目录下争创博客文件夹，在里面争创对应目录，目录名称跟a方法中的url路径对应

image

d.在每位目录下争创index.html,并按如下图形式添加代码，这样就可以按分类输出文章

image