このリポジトリは、ソフトウェア開発者としての仕事を紹介する個人的なウェブサイトをキックスタートするために必要なコードを提供します。また、GitHubリポジトリでコードを管理すると、写真、バイオ、リポジトリなど、所有者のプロフィール情報を使用してWebページを自動的にレンダリングします。
しかし、あなたの個人的なウェブサイトはパーソナライズされるのを待っています。言語や業界など、ソフトウェア開発に関心のある特定の分野を強調するスペースが含まれています。そして、次の素晴らしいブログ投稿を公開するために立ち向かいます。
Jekyll(Webサイトの構築用)、GitHubページ(Webサイトをホストするため)、およびGithubのAPI(Webサイトにコンテンツを自動的に入力するため)の組み合わせを使用して、すべて可能です。
github/personal-website
レポをフォークします「パーソナルウェブサイトスターター」リポジトリの独自のコピーを作成するので、カスタマイズする独自のプロジェクトがあります。 「フォーク」はリポジトリのコピーです。したがって、 github/personal-website
リポジトリの上で「フォーク」を選択します。
フォークリポジトリの家を見つけたら、それはあなたのものです。あなたは所有者なので、必要に応じて公開する準備ができています。
地元のWeb開発環境でWebサイトを管理したい場合は、Rubyを使用します。
フォークされたリポジトリの家を見つけたら、クローンを作成します。
Jekyllは、ほとんどのシステムにインストールできるRuby宝石です。
gem install jekyll bundler
cd personal-website
bundle install
bundle exec jekyll serve
GitHubで個人のWebサイトのコードをホストすると、GitHubページから無料のホスティングのサポートが得られます。
最速のアプローチは、リポジトリのusername.github.io
名前を変更することです。ここでは、 username
はgithubユーザー名(または組織名)です。次に、リポジトリのmaster
ブランチに変更をプッシュすると、 username.github.io
アドレスのWebでアクセスできます。
カスタムドメインを使用する場合は、github.comのリポジトリの「カスタムドメイン」設定に追加する必要があります。次に、DNSプロバイダーでドメインを登録および/または構成します。
それはあなたのウェブサイトであり、ソースコードを制御します。必要に応じて、すべてをカスタマイズできます。しかし、私たちはあなたがあなたのウェブサイトを地面から離すときにあなたが考慮するためにいくつかの迅速なカスタマイズを提供しました。
ほとんどのカスタマイズは、リポジトリの_config.yml
ファイルを改訂することにより、数秒で実行できます。新しい変更を保存するたびにローカルサーバーを再起動することを忘れないでください。
jekyll serve
デフォルトでは、あなたのウェブサイトは、写真、名前、および基本情報が左に配置された「サイドバー」に表示される、大画面デバイスの2列のレイアウトに表示されます。ただし、レイアウトを読み取る_config.yml
ファイルのラインを変更することにより、「積み重ねられた」シングルコラムレイアウトにすばやく切り替えることができますlayout: sidebar
からlayout: stacked
。
デフォルトでは、あなたのウェブサイトは、「明るい」白と灰色の背景があり、暗いテキストで表示されます。ただし、スタイルを読み取る_config.yml
ファイルのラインを変更することにより、白いテキストで「暗い」背景にすばやく切り替えることができますstyle: light
to style: dark
。
あなたのウェブサイトには、「私の興味」というタイトルのセクションに表示される3つのトピック(「Webデザイン」と「サス」など)が事前に構成されています。これらはリポジトリの_config.yml
ファイルにも保存されます。ここでは、各トピックの名前と他の2つのオプションの詳細を定義できます。
web_url
:トピックにリンクするWebアドレス( https://github.com/topics/sass
)。image_url
:トピックに表示したい(理想的には正方形の)画像のWebアドレス。 ウェブサイトにページを追加するには(詳細な履歴書など)。
.html
または.md
ファイルを作成します。http://yoursite.dev/filename
など)で使用したいファイル名を挙げてください。 ---
layout: default
---
あなたのウェブサイトにブログ投稿を追加するには:
/_posts/
ディレクトリに新しい.md
ファイルを作成します。 YEAR-MONTH-DAY-title.MARKUP
---
title: "The title of my blog post"
---
あなたのウェブサイトには、参照できるプレースホルダーのブログ投稿が付属しています。特に、そのフロントマターは、Webサイトに表示されないように、 false
としてpublished
と宣言されています。
フロントマターのlayout
を定義することもできますが、Webサイトは/_posts/
ディレクトリのすべての投稿にpost
レイアウトを割り当てるために事前に構成されています。したがって、投稿でそれを宣言する必要はありません。
ブログ投稿を作成して管理するためのJekyllの慣習は非常に柔軟です。 「投稿」のJekyllのドキュメントで詳細をご覧ください。
個人的なウェブサイトを開始するための健全な基盤を提供するために、リポジトリには、Webサイト全体で再利用される「Dynamic .html
ファイル」をいくつかの「含まれています」が含まれています。それらはすべて/_includes/
ディレクトリに保存されています。
header.html
やfooter.html
など、通常の容疑者がいます。しかし、指摘する価値のある価値はほとんどありません:
interests.html
: _config.yml
にリストしたトピックが入っている「私の興味」の見出しと動的リスト。masthead.html
:すべてのWebページに目立つように表示されるアバター、名前、バイオ、およびその他のメタデータのコレクションがWebサイトの内容を特定するのに役立ちます。post-card.html
:ブログ投稿のコンパクトで要約されたプレゼンテーションは、再利用して最新のブログ投稿のリストを表示します。projects.html
:最新のGitHubリポジトリのリストが入っている「My Projects」の見出しと動的リスト。repo-card.html
:リポジトリのコンパクトで要約されたプレゼンテーション、再利用されて、githubリポジトリのリストを表示します。thoughts.html
:最新のブログ投稿のリストが入っている「My Thoughts」の見出しとダイナミックなリスト。topic-card.html
:トピックのコンパクトで要約されたプレゼンテーション( _config.yml
で定義)は、興味のリストを表示するために再利用されます。リポジトリには3つのレイアウトが付属しています。
index.html
ホームページで使用されて、プロジェクト、興味、および(オプションで)ブログ投稿のリストを表示します。/_posts/
ディレクトリの投稿でデフォルトで使用します。レイアウトを定義するためのJekyllのコンベンションは非常に柔軟です。 Jekyllの「レイアウト」ドキュメントでレイアウトのカスタマイズについて詳しく知ることができます。
あなたのウェブサイトは、 /assets/styles.scss
sass styleSheetに書いているカスタムスタイルとともに、「Primer」と呼ばれる非常に柔軟なCSSフレームワークを使用するために事前に構成されています。現在、CSSインポートATルールを使用して、 styles.scss
ファイル内で参照されています。
@import url('https://unpkg.com/primer/build/build.css');
もちろん、それを削除したり、別のフレームワークに置き換えることができます。あなたのウェブサイトが列の幅、マージン、背景の色などを定義するために、いくつかのプライマー「ユーティリティクラス」が参照されているHTMLが事前にパッケージ化されたことに留意してください。
このテーマは、MITライセンスの条件の下でオープンソースとして利用できます。