kaeland.github.io

開始構建您的個人網站

展示您的軟件開發技能

該存儲庫為您提供了啟動個人網站所需的代碼，以展示您作為軟件開發人員的工作。而且，當您在GITHUB存儲庫中管理代碼時，它將自動渲染一個網頁，其中包括所有者的個人資料信息，包括照片，生物和存儲庫。

不過，您的個人網站正在等待個性化。它包括突出您在軟件開發（例如語言或行業）中的特定特定領域的空間。它依靠您發布您的下一篇很棒的博客文章。

使用Jekyll（用於構建您的網站），GitHub頁面（用於託管您的網站）和GitHub的API（用於自動使用內容填充您的網站）的組合。

安裝

叉子github/personal-website repo

您將自己製作“個人網站入門”存儲庫的副本，因此您有自己的項目可以自定義。 “叉”是存儲庫的副本。因此，在github/personal-website存儲庫上選擇“叉”。

一旦找到了叉子存儲庫的房屋，那就是您的。您是所有者，因此，您可以隨時發布。

在您的本地開發環境中安裝

如果您想在本地Web開發環境中管理您的網站，則將使用Ruby。

找到叉子存儲庫的房屋後，請克隆它。

安裝Jekyll

Jekyll是可以安裝在大多數係統上的紅寶石寶石。

1. 安裝完整的紅寶石開發環境
2. 安裝Jekyll和Bundler Gems

 gem install jekyll bundler

3. 更改為新目錄

 cd personal-website

4. 安裝缺失的寶石

 bundle install

5. 構建網站並在本地服務器上提供該網站

 bundle exec jekyll serve

6. 現在瀏覽到http：// localhost：4000

發布

當您在GitHub上託管個人網站的代碼時，您會通過GitHub頁面獲得免費託管的支持。

最快的方法是重命名您的存儲庫username.github.io ，其中username是您的github用戶名（或組織名稱）。然後，下次您將任何更改推向存儲庫的master分支時，它們將在您的用戶username.github.io地址上在網絡上訪問。

如果要使用自定義域，則需要將其添加到github.com上的存儲庫的“自定義域”設置中。然後用DNS提供商註冊和/或配置域。

定制

這是您的網站，您可以控制源代碼。因此，如果願意，您可以自定義所有內容。但是，我們為您提供了一些快速的自定義，以便您考慮您的網站。

快速配置更改

大多數自定義可以在幾秒鐘內修改您的存儲庫的_config.yml文件。請記住，每次保存新更改時都重新啟動本地服務器，以便正確地重建您的Jekyll驅動的網站：

1. 通過輸入鍵盤命令CTRL + C關閉服務器
2. 重新啟動您的服務器： 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 ：您想在主題中出現的（理想的平方）圖像的網址。

添加頁面

要將頁面添加到您的網站（例如詳細簡歷）：

1. 在存儲庫的根部創建一個新的.html或.md文件。
2. 給它一個文件名，您想在頁面的URL中使用（例如http://yoursite.dev/filename ）。
3. 在文件的開頭，包括以下前提：

 ---
layout: default
---

4. 節省。

添加博客文章

將博客文章添加到您的網站：

1. 在您的存儲庫的/_posts/ Directory中創建一個新的.md文件。
2. 使用以下格式給它一個文件名：

 YEAR-MONTH-DAY-title.MARKUP

3. 在文件的開頭，包括以下前提：

 ---
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許可證的條款，該主題可作為開源。