trnck.dev
blog.trnck.dev
init README docs
+125
-61
+57
-25
README.md
+57
-25
README.md
···
1
-
# github-personal-website
1
+
# Personal website starter
2
+
3
+
This repository gives you the code you'll need to kickstart a personal website that showcases your work as a software developer. And when you manage the code in a GitHub repository, it will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories.
4
+
5
+
Your personal website is waiting to be personalized, though. It includes space to highlight your specific areas of interest in software development, like languages or industries. And it's standing by to publish your next great blog post.
6
+
7
+
It's all possible using the combination of [Jekyll](https://jekyllrb.com/docs/) (for building your website), [GitHub Pages](https://pages.github.com/) (for hosting your website), and [GitHub's API](https://developer.github.com/v3/) (for automatically populating your website with content).
2
8
3
-
Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
9
+
## Installation
4
10
5
-
To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
11
+
### Fork the `github/personal-website` repo
6
12
7
-
TODO: Delete this and the text above, and describe your gem
13
+
You'll be making your own copy of the "personal website starter" repository so you have your own project to customize. A "fork" is a copy of a repository. So select "Fork" atop [the `github/personal-website` repository](https://github.com/github/personal-website).
8
14
15
+
Once you've found a home for your forked repository, it's yours. You're the owner, so you're ready to publish, if you wish.
9
16
10
-
## Installation
17
+
### Install in your local development environment
11
18
12
-
Add this line to your Jekyll site's `Gemfile`:
19
+
Once you've found a home for your forked repository, [clone it](https://help.github.com/articles/cloning-a-repository/).
13
20
14
-
```ruby
15
-
gem "github-personal-website"
16
-
```
21
+
#### Install Jekyll
17
22
18
-
And add this line to your Jekyll site's `_config.yml`:
23
+
Jekyll is a [Ruby Gem](https://jekyllrb.com/docs/ruby-101/#gems) that can be installed on most systems.
19
24
20
-
```yaml
21
-
theme: github-personal-website
25
+
1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/)
26
+
2. Install Jekyll and [bundler](/docs/ruby-101/#bundler) [gems](/docs/ruby-101/#gems)
27
+
```
28
+
gem install jekyll bundler
22
29
```
30
+
3. Change into your new directory
31
+
```
32
+
cd personal-website
33
+
```
34
+
4. Build the site and make it available on a local server
35
+
```
36
+
bundle exec jekyll serve
37
+
```
38
+
5. Now browse to [http://localhost:4000](http://localhost:4000)
23
39
24
-
And then execute:
40
+
### Publish
41
+
42
+
When you host your personal website's code on GitHub, you get the support of free hosting through GitHub Pages.
43
+
44
+
**The fastest approach** is to rename your repository `username.github.io`, where `username` is your GitHub username (or organization name). Then, the next time you push any changes to your repository's `master` branch, they'll be accessible on the web at your `username.github.io` address.
45
+
46
+
**If you want to use a custom domain**, however, you'll want to add it to your repository's "Custom domain" settings on github.com. And then register and/or [configure your domain with a DNS provider](https://help.github.com/articles/quick-start-setting-up-a-custom-domain/).
47
+
48
+
## Customization
49
+
50
+
It's your website, and you control the source code. So you can custom everything, if you like. But we've provided a handful of quick customizations for you to consider as you get your website off the ground.
25
51
26
-
$ bundle
52
+
### Quick configuration changes
53
+
54
+
Most customizations can be done in a matter of seconds, by revising your repository's `_config.yml` file. Just remember to restart your local server each time you save new changes so your Jekyll-powered website rebuilds correctly:
55
+
56
+
1. Shut down your server by entering the keyboard command <kbd>CTRL</kbd>+<kbd>c</kbd>
57
+
2. Restart your server: `jekyll serve`
58
+
59
+
60
+
#### Layout
27
61
28
-
Or install it yourself as:
62
+
By default, your website will display in a two-column layout on larger-screen devices, with your photo, name, and basic information displayed in a left-aligned "sidebar." But you can quickly switch to a "stacked" single-column layout by changing the line in your `_config.yml` file that reads `layout: sidebar` to `layout: stacked`.
29
63
30
-
$ gem install github-personal-website
64
+
#### Style
31
65
32
-
## Usage
66
+
By default, your website appears with a "light" white and gray background, with dark text. But you can quickly switch to a "dark" background with white text by changing the line in your `_config.yml` file that reads `style: light` to `style: dark`.
33
67
34
-
TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
68
+
#### Topics
35
69
36
-
## Contributing
70
+
Your website comes pre-configured with three topics (e.g. "Web design" and "Sass") that appear in a section titled "My Interests." These are also stored in your repository's `_config.yml` file, where you can define each topic's name and two other optional details:
37
71
38
-
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
72
+
- `web_url`: The web address you'd like to your topic to link to (e.g. `https://github.com/topics/sass`).
73
+
- `image_url`: The web address of an (ideally square) image that you'd like to appear with your topic.
39
74
40
-
## Development
75
+
### Pages and blog posts
41
76
42
-
To set up your environment to develop this theme, run `bundle install`.
43
77
44
-
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
45
78
46
-
When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
47
-
To add a custom directory to your theme-gem, please edit the regexp in `github-personal-website.gemspec` accordingly.
79
+
### Content and templates
48
80
49
81
## License
50
82
+3
-3
_config.yml
+3
-3
_config.yml
···
19
19
20
20
topics:
21
21
- name: CSS
22
-
github_name: css
23
-
image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
22
+
github_name: https://github.com/topics/css
23
+
web_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
24
24
25
25
- name: Web design
26
26
27
27
- name: Sass
28
-
github_name: sass
28
+
web_url: https://github.com/topics/sass
29
29
image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/sass/sass.png
+2
-2
_includes/topic-card.html
+2
-2
_includes/topic-card.html
···
1
-
{% if topic.github_name %}
2
-
<a href="https://github.com/topics/{{ topic.github_name }}" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
1
+
{% if topic.web_url %}
2
+
<a href="{{ topic.web_url }}" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
3
3
{% if topic.image_url %}
4
4
<img src="{{ topic.image_url }}" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="{{ topic.name }}">
5
5
{% else %}
+57
-25
_site/README.md
+57
-25
_site/README.md
···
1
-
# github-personal-website
1
+
# Personal website starter
2
+
3
+
This repository gives you the code you'll need to kickstart a personal website that showcases your work as a software developer. And when you manage the code in a GitHub repository, it will automatically render a webpage with the owner's profile information, including a photo, bio, and repositories.
4
+
5
+
Your personal website is waiting to be personalized, though. It includes space to highlight your specific areas of interest in software development, like languages or industries. And it's standing by to publish your next great blog post.
6
+
7
+
It's all possible using the combination of [Jekyll](https://jekyllrb.com/docs/) (for building your website), [GitHub Pages](https://pages.github.com/) (for hosting your website), and [GitHub's API](https://developer.github.com/v3/) (for automatically populating your website with content).
2
8
3
-
Welcome to your new Jekyll theme! In this directory, you'll find the files you need to be able to package up your theme into a gem. Put your layouts in `_layouts`, your includes in `_includes`, your sass files in `_sass` and any other assets in `assets`.
9
+
## Installation
4
10
5
-
To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site!
11
+
### Fork the `github/personal-website` repo
6
12
7
-
TODO: Delete this and the text above, and describe your gem
13
+
You'll be making your own copy of the "personal website starter" repository so you have your own project to customize. A "fork" is a copy of a repository. So select "Fork" atop [the `github/personal-website` repository](https://github.com/github/personal-website).
8
14
15
+
Once you've found a home for your forked repository, it's yours. You're the owner, so you're ready to publish, if you wish.
9
16
10
-
## Installation
17
+
### Install in your local development environment
11
18
12
-
Add this line to your Jekyll site's `Gemfile`:
19
+
Once you've found a home for your forked repository, [clone it](https://help.github.com/articles/cloning-a-repository/).
13
20
14
-
```ruby
15
-
gem "github-personal-website"
16
-
```
21
+
#### Install Jekyll
17
22
18
-
And add this line to your Jekyll site's `_config.yml`:
23
+
Jekyll is a [Ruby Gem](https://jekyllrb.com/docs/ruby-101/#gems) that can be installed on most systems.
19
24
20
-
```yaml
21
-
theme: github-personal-website
25
+
1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/)
26
+
2. Install Jekyll and [bundler](/docs/ruby-101/#bundler) [gems](/docs/ruby-101/#gems)
27
+
```
28
+
gem install jekyll bundler
22
29
```
30
+
3. Change into your new directory
31
+
```
32
+
cd personal-website
33
+
```
34
+
4. Build the site and make it available on a local server
35
+
```
36
+
bundle exec jekyll serve
37
+
```
38
+
5. Now browse to [http://localhost:4000](http://localhost:4000)
23
39
24
-
And then execute:
40
+
### Publish
41
+
42
+
When you host your personal website's code on GitHub, you get the support of free hosting through GitHub Pages.
43
+
44
+
**The fastest approach** is to rename your repository `username.github.io`, where `username` is your GitHub username (or organization name). Then, the next time you push any changes to your repository's `master` branch, they'll be accessible on the web at your `username.github.io` address.
45
+
46
+
**If you want to use a custom domain**, however, you'll want to add it to your repository's "Custom domain" settings on github.com. And then register and/or [configure your domain with a DNS provider](https://help.github.com/articles/quick-start-setting-up-a-custom-domain/).
47
+
48
+
## Customization
49
+
50
+
It's your website, and you control the source code. So you can custom everything, if you like. But we've provided a handful of quick customizations for you to consider as you get your website off the ground.
25
51
26
-
$ bundle
52
+
### Quick configuration changes
53
+
54
+
Most customizations can be done in a matter of seconds, by revising your repository's `_config.yml` file. Just remember to restart your local server each time you save new changes so your Jekyll-powered website rebuilds correctly:
55
+
56
+
1. Shut down your server by entering the keyboard command <kbd>CTRL</kbd>+<kbd>c</kbd>
57
+
2. Restart your server: `jekyll serve`
58
+
59
+
60
+
#### Layout
27
61
28
-
Or install it yourself as:
62
+
By default, your website will display in a two-column layout on larger-screen devices, with your photo, name, and basic information displayed in a left-aligned "sidebar." But you can quickly switch to a "stacked" single-column layout by changing the line in your `_config.yml` file that reads `layout: sidebar` to `layout: stacked`.
29
63
30
-
$ gem install github-personal-website
64
+
#### Style
31
65
32
-
## Usage
66
+
By default, your website appears with a "light" white and gray background, with dark text. But you can quickly switch to a "dark" background with white text by changing the line in your `_config.yml` file that reads `style: light` to `style: dark`.
33
67
34
-
TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets.
68
+
#### Topics
35
69
36
-
## Contributing
70
+
Your website comes pre-configured with three topics (e.g. "Web design" and "Sass") that appear in a section titled "My Interests." These are also stored in your repository's `_config.yml` file, where you can define each topic's name and two other optional details:
37
71
38
-
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/hello. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
72
+
- `web_url`: The web address you'd like to your topic to link to (e.g. `https://github.com/topics/sass`).
73
+
- `image_url`: The web address of an (ideally square) image that you'd like to appear with your topic.
39
74
40
-
## Development
75
+
### Pages and blog posts
41
76
42
-
To set up your environment to develop this theme, run `bundle install`.
43
77
44
-
Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal.
45
78
46
-
When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled.
47
-
To add a custom directory to your theme-gem, please edit the regexp in `github-personal-website.gemspec` accordingly.
79
+
### Content and templates
48
80
49
81
## License
50
82
+6
-6
_site/index.html
+6
-6
_site/index.html
···
181
181
182
182
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
183
183
184
-
<a href="https://github.com/topics/css" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
184
+
<div class="github-component position-relative height-full text-center border border-gray-light rounded-1 bg-white p-5">
185
185
186
186
<img src="https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="CSS">
187
187
188
-
<p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">CSS</p>
188
+
<p class="f3 lh-condensed text-center mb-0 mt-1">CSS</p>
189
189
190
-
</a>
190
+
</div>
191
191
192
192
193
193
</div>
···
212
212
213
213
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
214
214
215
-
<a href="https://github.com/topics/sass" class="github-component position-relative hover-grow height-full no-underline d-flex flex-column flex-justify-center text-center border border-gray-light rounded-1 bg-white p-5">
215
+
<div class="github-component position-relative height-full text-center border border-gray-light rounded-1 bg-white p-5">
216
216
217
217
<img src="https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/sass/sass.png" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="Sass">
218
218
219
-
<p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">Sass</p>
219
+
<p class="f3 lh-condensed text-center mb-0 mt-1">Sass</p>
220
220
221
-
</a>
221
+
</div>
222
222
223
223
224
224
</div>