Benjamin Dill

Benjamin Dill's Personal Website

Welcome to my website! Currently a work in progress. Here is a (rough) checklist of what I need to do: [5/8]

Translate from org to static web
Add styling
Find a service to provide static hosting
Update DNS to use GitHub Pages hosting
Add header/other boilerplate functionality
Add org project to source control
Make page responsive
Push button deploy

This site is built with emacs and org-mode

Push Button Deploy

To export and deploy the site:

Run org-publish-current-project (C-c C-e P p)
Commit and push the changed files to GitHub

Translate from org to static web

Tangle the code blocks in this file with C-c C-v t

Add a line to init.el (or wherever you load your emacs config from) to load the file generated:

(load-file "~/.emacs.d/web-config.el")

(require 'ox-publish)
(setq org-publish-project-alist
      '(("personal-site"
	 :base-directory "~/git/web/com/benjamindill/"
	 :base-extension "org"
	 :publishing-directory "~/git/publish/personal/"
	 :recursive t
	 :publishing-function org-html-publish-to-html
	 :headline-levels 4
	 :auto-preamble t
	 )
	("personal-site-static"
	 :base-directory "~/git/web/com/benjamindill/"
	 :base-extension "css\\|js\\|png\\|jpg\\|gif\\|pdf\\|mp3\\|ogg\\|swf"
	 :publishing-directory "~/git/publish/personal/"
	 :recursive t
	 :publishing-function org-publish-attachment
	 )
	("personal" :components ("personal-site" "personal-site-static"))
	 ))

Add styling

Basic styling.

header {
    background-color: #59ffff;
    background-position: center top;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    height: 4px;
}
body {
    margin: 0 auto;
    max-width: 50em;
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
    padding: 4em 1em;
    color: #566b78;
}

h2 {
    margin-top: 1em;
    padding-top: 1em;
}

h1,
h2,
strong {
    color: #333;
}
code,
pre {
    background: #f5f7f9;
    border-bottom: 1px solid #d8dee9;
    color: #555;
}
pre {
    border-left: 2px solid #69c;
}
header h1 {
    color: white;
    font-size: 2.5em;
    font-weight: 300;
}
header a {
    border: 1px solid #e81c4f;
    border-radius: 290486px;
    color: white;
    font-size: 0.6em;
    letter-spacing: 0.2em;
    padding: 1em 2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: none 200ms ease-out;
    transition-property: color, background;
}
header a:hover {
    background: #e81c4f;
    color: white;
}

Find a service to provide static hosting

For this project I plan to use Github Pages to host my personal site, resume, and blog.

Other various org export settings