Skip to content

Commit 13375b1

Browse files
brandonrosagebrandonrosage
committed
finished README
1 parent eceece5 commit 13375b1

File tree

6 files changed

+292
-14
lines changed

6 files changed

+292
-14
lines changed

‎README.md‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,80 @@ Your website comes pre-configured with three topics (e.g. "Web design" and "Sass
7272
- `web_url`: The web address you'd like to your topic to link to (e.g. `https://github.com/topics/sass`).
7373
- `image_url`: The web address of an (ideally square) image that you'd like to appear with your topic.
7474

75-
### Pages and blog posts
75+
## Adding pages
7676

77+
To **add a page** to your website (e.g. detailed resume):
7778

79+
1. Create a new `.html` or `.md` file at the root of your repository.
80+
2. Give it a filename that you want to be used in the page's URL (e.g. `http://yoursite.dev/filename`).
81+
3. At the start of your file, include the following [front matter](https://jekyllrb.com/docs/front-matter/):
7882

79-
### Content and templates
83+
```
84+
---
85+
layout: default
86+
---
87+
```
88+
89+
4. Save.
90+
91+
## Adding blog posts
92+
93+
To **add a blog post** to your website:
94+
95+
1. Create a new `.md` file in your repository's `/_posts/` directory.
96+
2. Give it a filename using the following format:
97+
98+
```
99+
YEAR-MONTH-DAY-title.MARKUP
100+
```
101+
102+
3. At the start of your file, include the following [front matter](https://jekyllrb.com/docs/front-matter/):
103+
104+
```
105+
---
106+
title: "The title of my blog post"
107+
---
108+
```
109+
110+
Your website comes with a placeholder blog post that you can reference. Notably, its [front matter](https://jekyllrb.com/docs/front-matter/) declares `published` as `false`, so that it won't appear on your website.
111+
112+
While you _can_ also define a `layout` in the front matter, your website is pre-configured to assign the `post` layout to all of the posts in your `/_posts/` directory. So you don't have to declare that in your posts, if you don't want to.
113+
114+
Jekyll's conventions for authoring and managing blog posts is very flexible. You can [learn more in Jekyll's documentation for "Posts."](https://jekyllrb.com/docs/posts/)
115+
116+
## Content and templates
117+
118+
To give you a sound foundation to start your personal website, your repository includes a handful of "includes" -- dynamic `.html` files that are re-used throughout your website. They're all stored in the `/_includes/` directory.
119+
120+
There are the usual suspects, like `header.html` and `footer.html`. But there are few more worth pointing out:
121+
122+
- `interests.html`: A heading and dynamic list of "My Interests," which is populated with the [topics](#topics) you list in your `_config.yml`.
123+
- `masthead.html`: A collection of your avatar, name, bio, and other metadata that's displayed prominently on all your webpages to help identify what the website is about.
124+
- `post-card.html`: A compact, summarized presentation of a blog post, re-used to display a listing of your latest blog posts.
125+
- `projects.html`: A heading and dynamic list of "My Projects," which is populated with a listing of your newest GitHub repositories.
126+
- `repo-card.html`: A compact, summarized presentation of a repository, re-used to display a listing of your GitHub repositories.
127+
- `thoughts.html`: A heading and dynamic list of "My Thoughts," which is populated with a listing of your latest blog posts.
128+
- `topic-card.html`: A compact, summarized presentation of a topic (defined in your `_config.yml`), re-used to display a listing of your interests.
129+
130+
### Layouts
131+
132+
Your repository comes with three layouts:
133+
134+
- **default**: Not used by any of the built-in pages or posts, but useful for any new pages you create.
135+
- **home**: Used by your `index.html` homepage to display listings of your projects, interests, and (optionally) your blog posts.
136+
- **post**: Used by default by the posts in your `/_posts/` directory.
137+
138+
Jekyll's convention for defining layouts is very flexible. You can [learn more about customizing your layouts in the Jekyll "Layouts" docs.](https://jekyllrb.com/docs/layouts/)
139+
140+
## Styles
141+
142+
Your website is pre-configured to use [a very flexible CSS framework called "Primer,"](https://styleguide.github.com/primer/) alongside any custom styles you write in your `/assets/styles.scss` Sass stylesheet. It's currently referenced within your `styles.scss` file, using the CSS import at-rule:
143+
144+
```
145+
@import url('https://unpkg.com/primer/build/build.css');
146+
```
147+
148+
You are, of course, welcome to remove it or replace it with another framework. Just bear in mind that the HTML that your website came pre-packaged with references multiple Primer "utility classes" to define things like column widths, margins, and background colors.
80149

81150
## License
82151

‎_config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ defaults:
1919

2020
topics:
2121
- name: CSS
22-
github_name: https://github.com/topics/css
23-
web_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
22+
web_url: https://github.com/topics/css
23+
image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
2424

2525
- name: Web design
2626

‎_includes/projects.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Projects</h2>
22
<p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">GitHub repositories that I've built.</p>
33
<div class="d-sm-flex flex-wrap gutter-condensed mb-4">
4-
{% for repository in site.github.public_repositories limit: 4 %}
4+
{% for repository in site.github.public_repositories limit: 9 %}
55
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
66
{% include repo-card.html %}
77
</div>

‎_includes/thoughts.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<h2 {% if site.style == 'dark' %}class="text-white"{% endif %}>My Thoughts</h2>
22
<p class="f4 mb-4 {% if site.style == 'dark' %}text-white{% else %}text-gray{% endif %}">Articles I've written.</p>
33
<div class="d-sm-flex flex-wrap gutter-condensed mb-4">
4-
{% for post in site.posts limit: 4 %}
4+
{% for post in site.posts limit: 6 %}
55
<div class="col-sm-6 col-md-12 col-lg-6 col-xl-4 mb-3">
66
{% include post-card.html %}
77
</div>

‎_site/README.md‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,80 @@ Your website comes pre-configured with three topics (e.g. "Web design" and "Sass
7272
- `web_url`: The web address you'd like to your topic to link to (e.g. `https://github.com/topics/sass`).
7373
- `image_url`: The web address of an (ideally square) image that you'd like to appear with your topic.
7474

75-
### Pages and blog posts
75+
## Adding pages
7676

77+
To **add a page** to your website (e.g. detailed resume):
7778

79+
1. Create a new `.html` or `.md` file at the root of your repository.
80+
2. Give it a filename that you want to be used in the page's URL (e.g. `http://yoursite.dev/filename`).
81+
3. At the start of your file, include the following [front matter](https://jekyllrb.com/docs/front-matter/):
7882

79-
### Content and templates
83+
```
84+
---
85+
layout: default
86+
---
87+
```
88+
89+
4. Save.
90+
91+
## Adding blog posts
92+
93+
To **add a blog post** to your website:
94+
95+
1. Create a new `.md` file in your repository's `/_posts/` directory.
96+
2. Give it a filename using the following format:
97+
98+
```
99+
YEAR-MONTH-DAY-title.MARKUP
100+
```
101+
102+
3. At the start of your file, include the following [front matter](https://jekyllrb.com/docs/front-matter/):
103+
104+
```
105+
---
106+
title: "The title of my blog post"
107+
---
108+
```
109+
110+
Your website comes with a placeholder blog post that you can reference. Notably, its [front matter](https://jekyllrb.com/docs/front-matter/) declares `published` as `false`, so that it won't appear on your website.
111+
112+
While you _can_ also define a `layout` in the front matter, your website is pre-configured to assign the `post` layout to all of the posts in your `/_posts/` directory. So you don't have to declare that in your posts, if you don't want to.
113+
114+
Jekyll's conventions for authoring and managing blog posts is very flexible. You can [learn more in Jekyll's documentation for "Posts."](https://jekyllrb.com/docs/posts/)
115+
116+
## Content and templates
117+
118+
To give you a sound foundation to start your personal website, your repository includes a handful of "includes" -- dynamic `.html` files that are re-used throughout your website. They're all stored in the `/_includes/` directory.
119+
120+
There are the usual suspects, like `header.html` and `footer.html`. But there are few more worth pointing out:
121+
122+
- `interests.html`: A heading and dynamic list of "My Interests," which is populated with the [topics](#topics) you list in your `_config.yml`.
123+
- `masthead.html`: A collection of your avatar, name, bio, and other metadata that's displayed prominently on all your webpages to help identify what the website is about.
124+
- `post-card.html`: A compact, summarized presentation of a blog post, re-used to display a listing of your latest blog posts.
125+
- `projects.html`: A heading and dynamic list of "My Projects," which is populated with a listing of your newest GitHub repositories.
126+
- `repo-card.html`: A compact, summarized presentation of a repository, re-used to display a listing of your GitHub repositories.
127+
- `thoughts.html`: A heading and dynamic list of "My Thoughts," which is populated with a listing of your latest blog posts.
128+
- `topic-card.html`: A compact, summarized presentation of a topic (defined in your `_config.yml`), re-used to display a listing of your interests.
129+
130+
### Layouts
131+
132+
Your repository comes with three layouts:
133+
134+
- **default**: Not used by any of the built-in pages or posts, but useful for any new pages you create.
135+
- **home**: Used by your `index.html` homepage to display listings of your projects, interests, and (optionally) your blog posts.
136+
- **post**: Used by default by the posts in your `/_posts/` directory.
137+
138+
Jekyll's convention for defining layouts is very flexible. You can [learn more about customizing your layouts in the Jekyll "Layouts" docs.](https://jekyllrb.com/docs/layouts/)
139+
140+
## Styles
141+
142+
Your website is pre-configured to use [a very flexible CSS framework called "Primer,"](https://styleguide.github.com/primer/) alongside any custom styles you write in your `/assets/styles.scss` Sass stylesheet. It's currently referenced within your `styles.scss` file, using the CSS import at-rule:
143+
144+
```
145+
@import url('https://unpkg.com/primer/build/build.css');
146+
```
147+
148+
You are, of course, welcome to remove it or replace it with another framework. Just bear in mind that the HTML that your website came pre-packaged with references multiple Primer "utility classes" to define things like column widths, margins, and background colors.
80149

81150
## License
82151

0 commit comments

Comments
 (0)