{"id":302,"date":"2016-09-14T15:47:56","date_gmt":"2016-09-14T13:47:56","guid":{"rendered":"https:\/\/wpethzprd.ethz.ch\/isgdmath\/?p=302"},"modified":"2026-03-23T13:35:57","modified_gmt":"2026-03-23T12:35:57","slug":"personal-homepage","status":"publish","type":"post","link":"https:\/\/blogs.ethz.ch\/isgdmath\/personal-homepage\/","title":{"rendered":"Personal homepage with ETH Layout"},"content":{"rendered":"\n<p>One possible way to have a personal homepage at the Department of Mathematics with a corporate design is described below.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/blogs.ethz.ch\/isgdmath\/files\/2016\/09\/personal-homepage.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"989\" src=\"https:\/\/blogs.ethz.ch\/isgdmath\/files\/2016\/09\/personal-homepage-1024x989.png\" alt=\"personal-homepage\" class=\"wp-image-304\" srcset=\"https:\/\/blogs.ethz.ch\/isgdmath\/files\/2016\/09\/personal-homepage-1024x989.png 1024w, https:\/\/blogs.ethz.ch\/isgdmath\/files\/2016\/09\/personal-homepage-300x290.png 300w, https:\/\/blogs.ethz.ch\/isgdmath\/files\/2016\/09\/personal-homepage-768x742.png 768w, https:\/\/blogs.ethz.ch\/isgdmath\/files\/2016\/09\/personal-homepage-624x603.png 624w, https:\/\/blogs.ethz.ch\/isgdmath\/files\/2016\/09\/personal-homepage.png 1884w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_1\">Configuration<\/h2>\n\n\n\n<p>Open a terminal (for MacOS: Menu &gt; Finder &gt; Go &gt; Utilities &gt; Terminal) on a computer of D-MATH or on your private computer connected with VPN and login for instance on <code>ion-4<\/code> i.e.:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ ssh ion-4<\/code><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>Afterwards execute following command:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$ create-personal-homepage<\/code><\/pre>\n\n\n\n<p>Now you should have following files in you <code>www<\/code>-folder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>-rw-r--r--. 1 username others  1247 Sep 14 14:48 about.md\n-rw-r--r--. 1 username others 20047 Sep 14 14:48 avatar.png\n-rw-r--r--. 1 username others   381 Sep 14 14:50 config.inc.php\n-rw-r--r--. 1 username others   717 Sep 14 14:48 contact.md\n-rw-r--r--. 1 username others   460 Sep 14 14:48 cv.md\n-rw-r--r--. 1 username others   861 Sep 14 14:48 publications.md\n-rw-r--r--. 1 username others   647 Sep 14 14:48 research.md\n-rw-r--r--. 1 username others   298 Sep 14 14:48 teaching.md<\/code><\/pre>\n\n\n\n<p>Modify the file <code>config.inc.php<\/code> according to your needs; change at least the variable <code>$fullname<\/code> and the image file <code>avatar.png<\/code> with a picture of you (the best format is a <strong>square<\/strong>).<\/p>\n\n\n\n<p><strong>Notes:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you want to extend the navigation, just add a new line in <code>config.inc.php<\/code> like this one and create a file with the extension <code>.md<\/code>: (in this case <code>test1.md<\/code>)<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>        &#091;'title' =&gt; 'My Test 1', 'url' =&gt; 'test1'],<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>If you want to add a sub-navigation, for instance to the new navigation explained here above, add this to the&nbsp;<code>config.inc.php<\/code>:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>        &#091;'title' =&gt; 'My Test 1', 'url' =&gt; 'test1', sub =&gt; &#091;\n            &#091;'title' =&gt; 'Sub Menu 1', 'url' =&gt; 'test1.1'],\n            &#091;'title' =&gt; 'Sub Menu 2', 'url' =&gt; 'test1.2'],\n            &#091;'title' =&gt; 'Sub Menu 3', 'url' =&gt; 'test1.3']\n        ]],<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_2\">Editing your pages<\/h2>\n\n\n\n<p>Each page of your website corresponds to file ending with <code>.md<\/code> . The files are located in you <code>www<\/code>-folder on the server that you can easily access. Here you find&nbsp;<a href=\"https:\/\/blogs.ethz.ch\/isgdmath\/accessing-your-files\/\">how to access your files on the server<\/a>. The ending <code>.md<\/code> is the abbreviation for <a href=\"https:\/\/en.wikipedia.org\/wiki\/Markdown\">MarkDown<\/a> which is a lightweight markup language with plain text formatting syntax. No need to learn HTML! Just edit a <code>.md<\/code>-sample-files according to the syntax and save it.<\/p>\n\n\n\n<p>If you don&#8217;t need a particular page, just remove the corresponding <code>.md<\/code>-file. If you need a new page just create a new <code>.md<\/code>-file (or copy an existing on) and edit it.<\/p>\n\n\n\n<p>Note that a file named for instance PAGE.md will be available online unter the URL https:\/\/people.math.ethz.ch\/~USERNAME\/PAGE<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">MarkDown Editors<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/apps.apple.com\/ch\/app\/markdown-editor\/id1458220908\">Markdown Editor<\/a> (macOS)<\/li>\n\n\n\n<li><a href=\"https:\/\/apps.apple.com\/de\/app\/id1507139439\">One Markdown<\/a> (macOS)<\/li>\n\n\n\n<li><a href=\"https:\/\/typora.io\">Typora<\/a> (macOS, Linux &amp; Windows &#8211; not free, but good)<\/li>\n\n\n\n<li><a href=\"https:\/\/macdown.uranusjr.com\/\">MacDown<\/a> (macOS)<\/li>\n\n\n\n<li><a href=\"https:\/\/world.pages.gitlab.gnome.org\/apostrophe\/\">Apostrophe<\/a> (Linux) &#8211; already installed on our devices<\/li>\n\n\n\n<li><a href=\"https:\/\/ghostwriter.kde.org\/\">Ghostwriter<\/a> (Linux)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc_3\">See also<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/daringfireball.net\/projects\/markdown\/syntax\">MarkDown official website<\/a> at daringfireball.net<\/li>\n\n\n\n<li><a href=\"https:\/\/docs.github.com\/en\/get-started\/writing-on-github\/getting-started-with-writing-and-formatting-on-github\/basic-writing-and-formatting-syntax\">MarkDown basic writing and formatting syntax <\/a>at github.com<\/li>\n\n\n\n<li><a href=\"http:\/\/parsedown.org\/demo\">MarkDown demo parser<\/a> at parsedown.org<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>One possible way to have a personal homepage at the Department of Mathematics with a corporate design is described below.<\/p>\n","protected":false},"author":43853,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[891],"tags":[],"class_list":["post-302","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/posts\/302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/users\/43853"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/comments?post=302"}],"version-history":[{"count":5,"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/posts\/302\/revisions"}],"predecessor-version":[{"id":1911,"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/posts\/302\/revisions\/1911"}],"wp:attachment":[{"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/media?parent=302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/categories?post=302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ethz.ch\/isgdmath\/wp-json\/wp\/v2\/tags?post=302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}