alterNERDtive/alterNERDtive.github.io
1
0
Fork 0
Code Activity Actions 1

init README docs

Browse source
This commit is contained in:
Brandon Rosage 2019-02-07 17:32:39 -06:00
parent 016c5ec56b
commit eceece546e
5 changed files with 127 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
README.md
View file

@ -1,50 +1,82 @@
# github-personal-website # Personal website starter
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`. 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.
To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site! 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.
TODO: Delete this and the text above, and describe your gem
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).
## Installation ## Installation
Add this line to your Jekyll site's `Gemfile`: ### Fork the `github/personal-website` repo
```ruby 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).
gem "github-personal-website"
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.
### Install in your local development environment
Once you've found a home for your forked repository, [clone it](https://help.github.com/articles/cloning-a-repository/).
#### Install Jekyll
Jekyll is a [Ruby Gem](https://jekyllrb.com/docs/ruby-101/#gems) that can be installed on most systems.
1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/)
2. Install Jekyll and [bundler](/docs/ruby-101/#bundler) [gems](/docs/ruby-101/#gems)
``` ```
gem install jekyll bundler
And add this line to your Jekyll site's `_config.yml`:
```yaml
theme: github-personal-website
``` ```
3. Change into your new directory
```
cd personal-website
```
4. Build the site and make it available on a local server
```
bundle exec jekyll serve
```
5. Now browse to [http://localhost:4000](http://localhost:4000)
And then execute: ### Publish
$ bundle When you host your personal website's code on GitHub, you get the support of free hosting through GitHub Pages.
Or install it yourself as: **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.
$ gem install github-personal-website **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/).
## Usage ## Customization
TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets. 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.
## Contributing ### Quick configuration changes
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. 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:
## Development 1. Shut down your server by entering the keyboard command <kbd>CTRL</kbd>+<kbd>c</kbd>
2. Restart your server: `jekyll serve`
To set up your environment to develop this theme, run `bundle install`.
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. #### Layout
When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled. 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`.
To add a custom directory to your theme-gem, please edit the regexp in `github-personal-website.gemspec` accordingly.
#### Style
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`.
#### Topics
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:
- `web_url`: The web address you'd like to your topic to link to (e.g. `https://github.com/topics/sass`).
- `image_url`: The web address of an (ideally square) image that you'd like to appear with your topic.
### Pages and blog posts
### Content and templates
## License ## License

6
_config.yml
View file

@ -19,11 +19,11 @@ defaults:
topics: topics:
- name: CSS - name: CSS
github_name: css github_name: https://github.com/topics/css
image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png web_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/css/css.png
- name: Web design - name: Web design
- name: Sass - name: Sass
github_name: sass web_url: https://github.com/topics/sass
image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/sass/sass.png image_url: https://raw.githubusercontent.com/github/explore/6c6508f34230f0ac0d49e847a326429eefbfc030/topics/sass/sass.png

4
_includes/topic-card.html
View file

@ -1,5 +1,5 @@
{% if topic.github_name %} {% if topic.web_url %}
<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"> <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">
{% if topic.image_url %} {% if topic.image_url %}
<img src="{{ topic.image_url }}" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="{{ topic.name }}"> <img src="{{ topic.image_url }}" width="64" height="64" class="mx-auto rounded-1 mb-3" alt="{{ topic.name }}">
{% else %} {% else %}

84
_site/README.md
View file

@ -1,50 +1,82 @@
# github-personal-website # Personal website starter
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`. 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.
To experiment with this code, add some sample content and run `bundle exec jekyll serve` – this directory is setup just like a Jekyll site! 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.
TODO: Delete this and the text above, and describe your gem
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).
## Installation ## Installation
Add this line to your Jekyll site's `Gemfile`: ### Fork the `github/personal-website` repo
```ruby 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).
gem "github-personal-website"
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.
### Install in your local development environment
Once you've found a home for your forked repository, [clone it](https://help.github.com/articles/cloning-a-repository/).
#### Install Jekyll
Jekyll is a [Ruby Gem](https://jekyllrb.com/docs/ruby-101/#gems) that can be installed on most systems.
1. Install a full [Ruby development environment](https://jekyllrb.com/docs/installation/)
2. Install Jekyll and [bundler](/docs/ruby-101/#bundler) [gems](/docs/ruby-101/#gems)
``` ```
gem install jekyll bundler
And add this line to your Jekyll site's `_config.yml`:
```yaml
theme: github-personal-website
``` ```
3. Change into your new directory
```
cd personal-website
```
4. Build the site and make it available on a local server
```
bundle exec jekyll serve
```
5. Now browse to [http://localhost:4000](http://localhost:4000)
And then execute: ### Publish
$ bundle When you host your personal website's code on GitHub, you get the support of free hosting through GitHub Pages.
Or install it yourself as: **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.
$ gem install github-personal-website **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/).
## Usage ## Customization
TODO: Write usage instructions here. Describe your available layouts, includes, sass and/or assets. 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.
## Contributing ### Quick configuration changes
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. 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:
## Development 1. Shut down your server by entering the keyboard command <kbd>CTRL</kbd>+<kbd>c</kbd>
2. Restart your server: `jekyll serve`
To set up your environment to develop this theme, run `bundle install`.
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. #### Layout
When your theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled. 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`.
To add a custom directory to your theme-gem, please edit the regexp in `github-personal-website.gemspec` accordingly.
#### Style
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`.
#### Topics
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:
- `web_url`: The web address you'd like to your topic to link to (e.g. `https://github.com/topics/sass`).
- `image_url`: The web address of an (ideally square) image that you'd like to appear with your topic.
### Pages and blog posts
### Content and templates
## License ## License

12
_site/index.html
View file

@ -181,13 +181,13 @@
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3"> <div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<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"> <div class="github-component position-relative height-full text-center border border-gray-light rounded-1 bg-white p-5">
<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"> <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">
<p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">CSS</p> <p class="f3 lh-condensed text-center mb-0 mt-1">CSS</p>
</a> </div>
</div> </div>
@ -212,13 +212,13 @@
<div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3"> <div class="col-6 col-md-12 col-lg-6 col-xl-4 mb-3">
<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"> <div class="github-component position-relative height-full text-center border border-gray-light rounded-1 bg-white p-5">
<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"> <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">
<p class="f3 lh-condensed text-center link-gray-dark mb-0 mt-1">Sass</p> <p class="f3 lh-condensed text-center mb-0 mt-1">Sass</p>
</a> </div>
</div> </div>