**[[https://pandoc.org|Pandoc]]** is a tool to convert one file format to another like markdown, html, docx, rtf, txt, epub, LaTeX, PDF and many others. 

[[https://pandoc.org/installing.html|Installing Pandoc]]

Pandoc is a command-line tool, not a graphic user interface. But there is also the graphic user interface, the [[https://panwriter.com|Pan Writer]] tool, where you can write and see how it looks like in real life (more or less) and most importantly you can convert files via the interface without using the command-line. You need to install Pandoc nevertheless. 

**Building a blog-like website with pandoc**:

Using pandoc to create a website might not be the best way, however it can be an easy start, a very DIY ✂️ way of making a website, which you can always edit later on. This guide will show you how to make a start. 

**1)** You can create a doc file with your usual text editor program, Libre Office for example. You can insert tables to make your menu or buttons, or you can fill the page entirely with tables. Save it as .docx locally in your computer. 

**2)** Converting the .docx file via command line: 
<code> pandoc --extract-media=. -s file_name.docx -t markdown -o file_name.md </code>

extract media enables to extract the images and makes a folder for them. -s is the usual Pandoc template that is being used in the markdown format.

**3a)** Converting the markdown file into html is possible via the command-line and also via the PanWriter. Via the command line:
<code> pandoc file_name.md -f markdown -t html -s -o file_name.html </code>

Or you can export the markdown file to html via PanWriter.

An example of a html file converted from a .docx file:
{{: pandoc_converted_example.png?700|}}

You can build your site even entirely out of tables and style them in your html file, here some [[https://www.w3schools.com/html/html_tables.asp|intro to building tables]].

[[https://www.youtube.com/watch?v=e62D-aayveY&list=PLP9IO4UYNF0VdAajP_5pYG-jG2JRrG72s|HTML - Tables]]

You can also [[https://smallsharpsoftwaretools.com/tutorials/create-html-from-multiple-markdown-files/|create a html file out of multiple markdown files]].

**3b)** Once you have a markdown file, you can convert the markdown file using a custom css file, that you can create yourself. For this, you can use this command: 

<code>
pandoc file_name.md -f markdown --css style.css -t html -s -o file_name.html
</code>

Download an example css file to try it out:

<file CSS file style.css>
</*
 * I add this to html files generated with pandoc.
 */

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  color: #000;
  font-family: "Microsoft Yahei","微软雅黑","SimHei","黑体",'Noto Sans',sans-serif,arial,serif;
  font-size: 12px;
  line-height: 1.7;
  padding: 1em;
  margin: auto;
  max-width: 60em;
  background: #fefefe;
}

a {
  color: #0645ad;
  text-decoration: none;
}

a:visited {
  color: #0b0080;
}

a:hover {
  color: #06e;
}

a:active {
  color: #faa700;
}

a:focus {
  outline: thin dotted;
}

*::-moz-selection {
  background: rgba(255, 255, 0, 0.3);
  color: #000;
}

*::selection {
  background: rgba(255, 255, 0, 0.3);
  color: #000;
}

a::-moz-selection {
  background: rgba(255, 255, 0, 0.3);
  color: #0645ad;
}

a::selection {
  background: rgba(255, 255, 0, 0.3);
  color: #0645ad;
}

p {
  margin: 1em 0;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  line-height: 125%;
  margin-top: 2em;
  font-weight: normal;
}

h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.9em;
}

blockquote {
  color: #666666;
  margin: 0;
  padding-left: 3em;
  border-left: 0.5em #EEE solid;
}

hr {
  display: block;
  height: 2px;
  border: 0;
  border-top: 1px solid #aaa;
  border-bottom: 1px solid #eee;
  margin: 1em 0;
  padding: 0;
}

pre, code, kbd, samp {
  color: #000;
  font-family: 'Liberation Mono', 'Courier New', Courier, monospace;
  background: #f6f8fa;
  border: 0;
}

pre {
  font-size: 0.9em;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px;
  border-style: dashed;
  border-radius: 4px;
  padding: 5px;
  margin: 1em 0;
  
  text-indent: 0;
  padding: 10px;
  overflow: auto;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

ul, ol {
  margin: 1em 0;
  padding: 0 0 0 2em;
}

li p:last-child {
  margin-bottom: 0;
}

ul ul, ol ol {
  margin: .3em 0;
}

dl {
  margin-bottom: 1em;
}

dt {
  font-weight: bold;
  margin-bottom: .8em;
}

dd {
  margin: 0 0 .8em 2em;
}

dd:last-child {
  margin-bottom: 0;
}

img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}

figure {
  display: block;
  text-align: center;
  margin: 1em 0;
}

figure img {
  border: none;
  margin: 0 auto;
}

figcaption {
  font-size: 0.8em;
  font-style: italic;
  margin: 0 0 .8em;
}

table {
  margin-bottom: 2em;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}

table th {
  padding: .2em 1em;
  background-color: #eee;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

table td {
  padding: .2em 1em;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  vertical-align: top;
}

.author {
  font-size: 1.2em;
  text-align: center;
}

@media only screen and (min-width: 480px) {
  body {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
@media print {
  * {
    background: transparent !important;
    color: black !important;
    filter: none !important;
    -ms-filter: none !important;
  }

  body {
    font-size: 12pt;
    max-width: 100%;
  }

  a, a:visited {
    text-decoration: underline;
  }

  hr {
    height: 1px;
    border: 0;
    border-bottom: 1px solid black;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
    content: "";
  }

  pre, blockquote {
    border: 1px solid #999;
    padding-right: 1em;
    page-break-inside: avoid;
  }

  tr, img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page :left {
    margin: 15mm 20mm 15mm 10mm;
}

  @page :right {
    margin: 15mm 10mm 15mm 20mm;
}

  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }
}>
</file>