该存储库为您提供了启动个人网站所需的代码,以展示您作为软件开发人员的工作。而且,当您在GITHUB存储库中管理代码时,它将自动渲染一个网页,其中包括所有者的个人资料信息,包括照片,生物和存储库。
不过,您的个人网站正在等待个性化。它包括突出您在软件开发(例如语言或行业)中的特定特定领域的空间。它依靠您发布您的下一篇很棒的博客文章。
使用Jekyll(用于构建您的网站),GitHub页面(用于托管您的网站)和GitHub的API(用于自动使用内容填充您的网站)的组合。
github/personal-website
repo您将自己制作“个人网站入门”存储库的副本,因此您有自己的项目可以自定义。 “叉”是存储库的副本。因此,在github/personal-website
存储库上选择“叉”。
一旦找到了叉子存储库的房屋,那就是您的。您是所有者,因此,您可以随时发布。
如果您想在本地Web开发环境中管理您的网站,则将使用Ruby。
找到叉子存储库的房屋后,请克隆它。
Jekyll是可以安装在大多数系统上的红宝石宝石。
gem install jekyll bundler
cd personal-website
bundle install
bundle exec jekyll serve
当您在GitHub上托管个人网站的代码时,您会通过GitHub页面获得免费托管的支持。
最快的方法是重命名您的存储库username.github.io
,其中username
是您的github用户名(或组织名称)。然后,下次您将任何更改推向存储库的master
分支时,它们将在您的用户username.github.io
地址上在网络上访问。
如果要使用自定义域,则需要将其添加到github.com上的存储库的“自定义域”设置中。然后用DNS提供商注册和/或配置域。
这是您的网站,您可以控制源代码。因此,如果愿意,您可以自定义所有内容。但是,我们为您提供了一些快速的自定义,以便您考虑您的网站。
大多数自定义可以在几秒钟内修改您的存储库的_config.yml
文件。请记住,每次保存新更改时都重新启动本地服务器,以便正确地重建您的Jekyll驱动的网站:
jekyll serve
默认情况下,您的网站将在大屏幕设备上以两列布局显示,并显示您的照片,名称和基本信息,显示在左侧的“侧边栏”中。但是,您可以通过更改读取布局的_config.yml
文件中的行来快速切换到“堆叠”的单列布局layout: sidebar
to layout: stacked
。
默认情况下,您的网站带有“轻”白色和灰色背景,并带有深色文字。但是,您可以通过更改读取样式的_config.yml
文件中的线路来快速切换到带有白色文本的“黑暗”背景style: light
到style: dark
。
您的网站预先配置了三个主题(例如“ Web Design”和“ Sass”),这些主题出现在标题为“我的兴趣”的部分中。这些也存储在您的存储库的_config.yml
文件中,您可以在其中定义每个主题的名称和其他两个可选详细信息:
web_url
:您想链接到(例如https://github.com/topics/sass
)的网址。image_url
:您想在主题中出现的(理想的平方)图像的网址。 要将页面添加到您的网站(例如详细简历):
.html
或.md
文件。http://yoursite.dev/filename
)。 ---
layout: default
---
将博客文章添加到您的网站:
/_posts/
Directory中创建一个新的.md
文件。 YEAR-MONTH-DAY-title.MARKUP
---
title: "The title of my blog post"
---
您的网站附带了您可以参考的占位符博客文章。值得注意的是,它的前提是published
false
,因此不会出现在您的网站上。
虽然您还可以在正面的情况下定义layout
,但您的网站已预先配置,以post
布局分配给/_posts/
Directory中的所有帖子。因此,如果您不想,您就不必在帖子中声明这一点。
Jekyll关于创作和管理博客文章的惯例非常灵活。您可以在Jekyll的“帖子”文档中了解更多信息。
为了为您提供一个启动个人网站的良好基础,您的存储库包含一些“ Incluct” - Dynamic .html
文件,这些文件在整个网站中都重复使用。它们都存储在/_includes/
目录中。
通常有嫌疑人,例如header.html
和footer.html
。但是几乎没有什么值得指出的:
interests.html
_config.yml
masthead.html
:您的头像,名称,生物和其他元数据的集合在您的所有网页上突出显示,以帮助识别网站的意义。post-card.html
:紧凑的,摘要的博客文章的介绍,重新使用以显示您最新的博客文章的列表。projects.html
:“我的项目”的标题和动态列表,其中包含您最新的GitHub存储库的列表。repo-card.html
:一个紧凑的,汇总的存储库,重新使用以显示您的github存储库的列表。thoughts.html
:“我的想法”的标题和动态列表,其中包含您最新博客文章的列表。topic-card.html
:一个紧凑的,汇总的主题(在您的_config.yml
中定义),重新使用以显示您的兴趣列表。您的存储库带有三个布局:
index.html
主页使用,以显示您的项目,兴趣和(选择)博客文章的列表。/_posts/
Directory中的帖子使用。Jekyll定义布局的约定非常灵活。您可以在Jekyll“布局”文档中了解有关定制布局的更多信息。
您的网站已预先配置,可以使用非常灵活的CSS框架,称为“底漆”,以及您在/assets/styles.scss
sass stylesheet中编写的任何自定义样式。当前使用CSS导入的AT规则:SCSS文件中的目前是在您的styles.scss
中引用的:
@import url('https://unpkg.com/primer/build/build.css');
当然,欢迎您将其删除或用另一个框架替换。只需记住,您的网站预先包装的HTML带有参考多个底漆“实用程序类”,以定义列宽度,边距和背景颜色之类的内容。
根据MIT许可证的条款,该主题可作为开源。