I am an ecologist and statistician, working as a postdoc currently. For me, what I need is a website that I can introduce myself to the public, archive some of my experiences, and communicate my thoughts with others. So I do not need fancy stuff. Static website fits this bill perfectly. I need a tool that can deal with most of the website constructing and I can focus on the content. Recently, I have moved my personal website from
Hugo and I loved it.
Hugo is already very easy to use. Yihui’s awesome R package blogdown makes it even easier. Therefore, if you are a R user, I recommend to work with the
Here, I briefly explain the structure of my website. Since I have very similar set up with Yihui’s website and I used his modified hugo-lithium-theme1, I strongly recommend to read his website set up.
Here is the tree structure of my website source code:
├── R │ ├── build.R │ ├── build_one.R │ └── clean_blogs.R ├── README.md ├── config.yaml ├── content │ ├── 404.md │ ├── _index.md │ ├── about.md │ ├── cn │ ├── cn-about.md │ ├── cn-vitae.md │ ├── en │ ├── en-about.md │ ├── en-vitae.md │ ├── links.md │ ├── research.md │ ├── resume.md │ └── zoey ├── index.Rmd ├── layouts │ ├── _default │ └── partials ├── static │ ├── CNAME │ ├── css │ ├── fonts │ ├── images │ ├── js │ └── pdf ├── themes │ └── hugo-lithium-theme └── website.Rproj
Let’s look at them individually.
Rfolder: this folder hosts R scripts. The
build_one.Rwere cloned from Yihui and they are used to convert
*.md. I did not use them yet. The
clean_blogs.Rwas written by me and mainly to change yaml headers from
jekyll. So, basically, you can ignore this folder.
README.md: some explanation for github repository.
config.yaml: this is the main file where you set up things. It is pretty straightforward but you need be careful to put all your information correct, e.g. Disqus shortname, Twitter handle, etc.
contentfolder: this the folder to put your webpages and blog posts. For example, I have
research.md, and three subfolders that will be turned into three blogs. If you open my website, it will be clear what roles these files/folders have. You can order them in the
config.yamlfile with the
index.Rmd: you do not need to change it.
layoutsfolder: this folder has files that will control the details of the website.
layouts ├── _default │ ├── list.html │ └── single.html └── partials │ ├── article_meta.html │ ├── disqus.html │ ├── fix404.html │ ├── footer.html │ ├── head_custom.html │ ├── nav.html │ └── prev_next.html
For example, I changed
partials/footer.htmlfile to include an email icon in the footer of web pages. I also included information of the last change of the website in the footer. Change according to your need. The
partials/article_meta.htmlwill show the icons at the top right of each blog post. If you have multiple blogs, make sure to change some of the line 7 in this file (I have 3 blogs here). The
_default/single.htmlassemble parts that defined in the
partialfolder together for each single page. Here, also remember to change things if you have multiple blogs.
staticfolder: holds customer defined css files and other things such as your avatar. Replace
images/logo.pngfile with your favorite icon. I also created a
CNAMEfile may not be necessary if you host your website through Netlify.
css/custom.css: change this file if you want to tweak things defined in the theme.
themesfolder: to hold themes. If you use regular
git cloneto clone my website, you will find it is empty. You can add the theme I use back with
git submodule add firstname.lastname@example.org:yihui/hugo-lithium-theme.git themes/hugo-lithium-theme
If you have installed
blogdown package, in RStudio, you can use the
Addins -- New Post to create a new post. In this way, you do not need to type the structure of the yaml header.
That’s it. Hopefully now you can clone the websites that you like (e.g. from rbind.io) and start to create your own website4. After done, you can click the
Addins -- Serve Site in RStudio (also shown in the above picture) and see how it looks.
Now, it is time to make your website public. I recommend to use Netlify. Its free plan allows you to deploy your github repository there with your own domain. Whenever you change the source code of the website on github, netlify will automatically rebuild it for you! How cool is that? To host your website with github pages, see here.
- frankly, I cloned his website and then tweaked based on it, which I think is the easist way to get started. If you also want clone his or my website, I suggest to use
git clone --recursive url-of-github-repo, which will also clone the theme for you. ↩
- start with 1 instead of 0. ↩
- including this one. ↩
- If you want to start it from scratch, this post is not for you. 😀😬😁 ↩