defekt jádra homepage (CZ)

motivation

I decided to start a website project for one friend of mine – Adam. This young Chemistry student, interested mainly in organic syntehesis techniques, often writes interesting posts about unusual electrostatic bonds, untypical reactions including a microwave reactor et cetera.

Those posts are mainly to be presented with a little (simple) figure(s) on his Instagram profile. Badly for me and some others, one cannot see those images/posts without a proper Meta account, which me personally lacks.

implementation

I was experimenting with various web application frameworks, when I nudged to Hugo (golang) framework project. This promising project popped in my interest, as it stated it was the fastest web app framework ever. Moreover, I started taking deeper dives into Go myself, so I decided to give it a try. Hugo does not provide support for Docker by default, but hosts a Dockerfile in the root of its repository. I spent many hours debuging, trying helplessly to make it work smoothly, but nothing seemed to be working well and sustainable for further usage.

Frustrated by that situation, I overlooked to other similiar projects, but deeply inside I felt I need to keep going. So I did and composed a docker-compose.yml file, a dot-environment file, and a Makefile to link it all together just to take a deep breath in and execute make serve.

Using this strategy I had been able to deploy this very website, and the site of my friend’s. In the near future I am preparing on to publish this template repository, giving back the community some of my contributions, to feel my sore fingers do not ache for nothing.

deployment procedure

Note: implicit access to the template repo for further reading required – to be released soon.

Hugo from Scratch Repo

Clone the repository (in this example an SSH connection is used with implicit SSH keys forwarding to fetch the remote repo). Do not forget to clone/init submodules too (--recurse-submodules); namely hugo submodule with Dockerfile:

1

git clone ssh://[email protected]/savla-dev/hugo-scratch --recurse-submodules

Next, one need to build a base docker image containing hugo binary (if not already has one):

1

make build

Now, initialaze a new hugo site folder to be linked/mounted/bind to the docker container. Take care to explore and modify that .env file before executing the initialization process – it contains core constants for the further processes!

1
2

vi .env
make init

Hugo external site repository is about to be generated in the PWD (working, the one containing Makefile) directory. For this command to work, the hugo executable is required, thus the image built just before is used to fullfil the quest.

At this point, please do check the newly created folder’s permissions as some can have root privileges assigned (this to be fixed!). If permissions are not to work wirh current user, some functions like site’s config editing won’t work.

And finally, one can start serving the site created using the already presented command batch:

1

make serve

This one creates/recreates/restarts a docker container serving static content from the hugo root directory. Internal port is explicitly set to TCP/443, because canonical links generated inside the container contain this port for some reason even in production mode.

Note: hugo executable is available in many public repositories, for this very purpose I anyways decided to use dockerized hugo encapsulated in its “standardized” environment.

disqus integration

Enabling disqus integration is a bit trickier than I would personally expect from such a project as Hugo. Anyway, I made it work and it is pretty simple afterwards.

Add this content to site-name/layouts/partials/comments.html:

1
2
3
4
5

{{- /* Comments area start */ -}}
{{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}}
{{- /* partial "disqus.html" . */ -}}
{{ template "_internal/disqus.html" . }}
{{- /* Comments area end */ -}}

And this piece of code to site-name/layouts/partials/disqus.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<div id="disqus_thread"></div>
<script type="text/javascript">

(function() {
    // Don't ever inject Disqus on localhost--it creates unwanted
    // discussions from 'localhost:1313' on your Disqus account...
    if (window.location.hostname == "localhost")
        return;

    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    var disqus_shortname = '{{ .Site.DisqusShortname }}';
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="https://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

references

LaTeX render

Add this content to layouts/partials/extend_footer.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{{- /* Footer custom content area start */ -}}
{{- /*     Insert any custom code web-analytics, resources, etc. here */ -}}

<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ 
    tex2jax: {
      inlineMath: [["$","$"],["\\(","\\)"]]
    } 
  })
</script>

{{- /* Footer custom content area end */ -}}

Then, one can easily write Math formulae:

1
2
3

isolated: 

$$\int\int \frac{x^{3}}{cos(2y)} dxdy$$

$$\int\int \frac{x^{3}}{cos(2y)} dxdy$$

1

inline: \\(\int \frac{x^{3}}{2} dx\\)

inline: \(\int\int \frac{x^{3}}{cos(2y)} dxdy\)

references