The following is my org file template for blogging.

#+TITLE: Article Title Goes Here
#+OPTIONS: toc:nil num:3 H:4 ^:nil pri:t

#+BEGIN_abstract
Article abstract goes here.
#+END_abstract

# now prints out the previously disabled (toc:nil) table of contents.
#+TOC: headlines 2

Your content goes here.

# note the ignore tag
* Refrences                                                          :ignore:

# prints out bibliograph, if any, with bibtex2html.  The first parameter is the
# bibliograph file name without .bib extension, the second is the reference
# style.  The rest parameters are parsed to `bibtex2html'.  Refer to the
# ox-bibtex document for further information.

#+BIBLIOGRAPHY: ref plain limit:t option:-nokeywords

# This is an automatically generated section if you use footnote.
* Footnotes

With all these setup, only one thing is left, i.e., tweaking the styles of exported html. By default, The HTML exporter assigns some special CSS classes to appropriate parts of the document and your style specifications may change these, in addition to any of the standard classes like for headlines, tables, etc. The list is actually not complete, you may want to export a test org file and read the source of exported html file to find out what classes are available. The current page shows off my org.css. Some other good styles for org-exported html can be found on http://orgmode.org/, http://doc.norang.ca/org-mode.html and etc.

The lisp function insert-file-contents used in ox-bibtex does not move point and insertion-marker to the end of inserted text (I'm not sure it is a bug or an intention). The result is that the citation is a dangling table not included in the bibliography div.

The expected result is

<div id="bibliography">
  <h2>Bibliography</h2>
  <table>
  <!-- Citation content goes here -->
  </table>
</div>

But we got

<div id="bibliography">
  <h2>Bibliography</h2>
</div>
<table>
<!-- Citation content goes here -->
</table>

Unless a patch is submitted, we may need to manually adjust this weird result.

The exported bibliography is always included in some other section div instead of a stand-lone section.

The expected result is

<div id="outline-container-1" class="outline-2">
  <!-- section 1 -->
</div>
<div id="outline-container-2" class="outline-2">
  <!-- section 2 -->
</div>
<div id="outline-container-3" class="outline-2">
  <!-- section 3 -->
</div>
<div id="bibliography">
  <!-- bibliography goes here -->
</div>

But we got

<div id="outline-container-1" class="outline-2">
  <!-- section 1 -->
</div>
<div id="outline-container-2" class="outline-2">
  <!-- section 2 -->
</div>
<div id="outline-container-3" class="outline-2">
  <!-- section 3 -->
  <div id="bibliography">
    <!-- bibliography goes here -->
  </div>
</div>

The problem is that the #+BIBLIOGRAPHY command is always ignored unless it is belonged to a section. This is due to the internal implementation of keyword parser of ox-html. Currently hacking some post-processing code is the only solution if you do not want to do it manually.

This problem is solved as follows.

1. Add the following snippet to your init.el

   (require 'ox-extra)
   (ox-extras-activate '(ignore-headlines))
   

2. adding ignore tag to whichever headline you want to ignore. Note that this is different from the COMMENT in Org mode in that COMMENT ignores the head and contents in its section, while ignore only ignores the headline but keeps the contents when exporting. See the above template.

The links generated by ox-bibtex is also troublesome. Given ref.bib, bibtex2html will generate two files, reb_bib.html and ref.html. The utility ox-bibtex directly inserts contents of ref.html to the current exported html. Now when you click links in the exported html, you will be directed to ref_bib.html. And when expecting to get back to the exported html by clicking links in ref_bib.html, you will be instead directed to ref.html. My solution is to remove the bibliograph source with option:-nobibsource replace the link in ref_bib.html with when compiling the HTML (see this gulpfile.js), it is a hacky way though.

If you use fci-mode , and it is turned on in the major code of your to-be-exported source code section, you will notice some dummy characters at each newline (as of Org-v9.3.1) as following.

#include <iostream>???
using namesapce std;???
???
int main()???
{???
  return 0;???
}???

The workaround to this issue: https://emacs.stackexchange.com/q/44361 and some discussions on emacs-orgmode maillist. I did not have this issue with previous version of org-mode and fci-mode. Simply turning off the fci-mode for major mode solves the problem.