mkudija.github.io

Matthew Kudija's Personal Website

License

The content of this website itself is licensed under the Creative Commons Attribution 3.0 license. The source code used to format and display that content—as well as any code displayed on this website—is licensed under the MIT license. Content and code referenced that was written by others is licenced under the particular licence they chose.

See more on my About page.

Build

$ cd Documents/GitHub/mkudija.github.io/
$ make build

How It's Made

1. Set Up GitHub Pages

Setup your <user>.github.io repository.
Under Settings > GitHub Pages you can enable GitHub Pages and select the source as either the master branch (root) of your repository, or the Docs folder. Select one and commit your website assets to that location (index.html, assets, etc.)
If you have an active website at <user>.github.io, enabling GitHub Pages in other repositories on your account will make them visible from your main website. For instance, my website home is matthewkudija.com, hosted in my mkudija.github.io repository. My blog is in the blog repository, and located therefore at matthewkudija.com/blog.

2. Download Theme

Find and download a theme. Some good (free) places to look include:
- HTML5UP
- Pelican Themes
- Find a website you like and inspect it, or better yet find a site hosted publicly on GitHub pages to view its whole source code.
Customize theme to your liking.
- This can be little things like changing the colors and typeface to larger things like adding functionality.
- You don't need to commit your changes to GitHub to see the results. You can view them locally by right clicking on the file and opening in a web browser. Tip: using Safari you can go to Develop > Enter Responsive Design Mode to see how your site will look on different screens. This is great for making sure that what you see on a desktop when editing it will work well on mobile.
- If you get stuck, it's easy to get help. You can hire someone on Fiverr or Upwork or for as little as $5-10 to fix an issue on your website. I recommend musebkhalid.
Alternatively, with a little HTML and CSS you can build a simple website yourself from scratch.

3. Set Up Extras

404.html

The default 404 page on GitHub pages is this:

If you would like a 404 page to match your theme, you can add a custom 404.html to your root directory.

CNAME

If you want a custom domain (i.e. matthewkudija.com instead of mkudija.github.io), perform the following:

Buy the domain from your preferred DNS provider. I use Host Gator.
Add a CNAME file to your directory. This should contain just the domain: matthewkudija.com.
Configure the A-record with the DNS provider to point to GitHub pages. I called Host Gator customer service and they got it set up. Refer to the documentation.
For Hostgator, set nameservers as:

NS1.LAUNCHPAD.COM
NS2.LAUNCHPAD.COM
NS3.LAUNCHPAD.COM
NS4.LAUNCHPAD.COM

GitHub Pages HTTPS

Info here. Set A-records as such:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

favicon.ico

Create or find a square image to use as your favicon. Go to one of the many favicon generator sites (such as this) to generate your favicon.

robots.txt

I added a robots.txt but removed it after seeing that it messed up Google search results.

sitemap.xml

I added a sitemap to aid in searching (and perhaps eventually get sitelinks on the search result) from xml-sitemaps.com.

meta tag

I updated the meta tag to improve search results.

<meta name="description" content="add a description of your site here">
<meta name="keywords" content="add, some, keywords, you, want, here">

Google Analytics

Set up Google Analytics to get your unique tracking ID (mine is UA-72240498-1) and then copy the required code in to your HTML pages:

This is the Global Site Tag (gtag.js) tracking code for this property. Copy and paste this code as the first item into the <HEAD> of every webpage you want to track. If you already have a Global Site Tag on your page, simply add the config line from the snippet below to your existing Global Site Tag.

<!-- Global Site Tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-72240498-1"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());
		gtag('config', 'UA-72240498-1');
	</script>

4. Enable Bigfoot Footnotes

See this commit

to change button appearance, customize class "bigfoot-footnote__button" properties in bigfoot-default.css
to change popup appearance, customize class "bigfoot-footnote__content" properties in bigfoot-default.css

5. Update Books

write book review in markdown
- See easybib exmple for footnote formatting: Henry James, The Ambassadors (Rockville: Serenity, 2009), 34-40. Footnotes in Markdown use this format:

"Blah blah blah."[^id] More words and more words.[^id2] Finally, let's add more words

[^id]: Footnote text for id1 goes here...
[^id2]: Footnote text for id2 goes here...

add cover image to images/books/
add data in books/md/_content.xlsx
run books/md/_build.py which creates an HTML file for each MD file defined in _content.xlsx*
commit changes (including newly created html file)

*Alternatively, individually convert from MD to HTML in the commany line by running markdown2.py (See here for more information about markdown2 from @trentm):

python markdown2.py -x footnotes,smarty-pants,cuddled-lists,target-blank-links FNAME.md > FNAME.html

6. Update Reading

Run reading.py to covert book list from Markdown to HTML. This also generates a plot.

python reading.py

7. Particle background

Add particle background from http://jnicol.github.io/particleground/
Config ~380 in assets/js/jquery.particleground.js

Example Websites

This website is inspired by a number of others, including those below:

Other Sites I've Built*

Built as in put together from a lot of other people's work and a little fiddling myself

Name		Name	Last commit message	Last commit date
Latest commit History 1,046 Commits
assets		assets
images		images
notes		notes
reading-notes		reading-notes
reading		reading
resume		resume
.gitignore		.gitignore
404.html		404.html
AAPL.html		AAPL.html
CNAME		CNAME
LICENSE (code).txt		LICENSE (code).txt
LICENSE (content).txt		LICENSE (content).txt
Makefile		Makefile
README.md		README.md
about.html		about.html
favicon.ico		favicon.ico
index.html		index.html
reading.html		reading.html
resume.html		resume.html
sitemap.xml		sitemap.xml

mkudija/mkudija.github.io

Folders and files

Latest commit

History

Repository files navigation