• Home
• Computers
• Your Personal Web Site

• GitHub or Pastebin: free, can be anonymous, very few features, you won't collect any ad money.


• Facebook page: free, very few features, hard to move to elsewhere, you won't collect any ad money.


• Tumblr or Medium blog/articles: free, you won't collect any ad money, I don't know the limits of them.


• Rich-site host: Squarespace or Wordpress: paid, lots of features, lots of support, hard to move to elsewhere, you won't collect any ad money.


• Medium-site host: Google Sites: free, some features, can use GUI or direct HTML, you won't collect any ad money.


• HTML-only site: hosted on any web server, either hand-built or using design tools.


• Web-app site: mix of HTML and server engines (PHP, SQL, etc).


• Business-app site: mix of HTML and server engines (PHP, SQL, etc) and gateway to payments/money.

• Domain: name such as "billdietrich.me".
  
  You buy this from a "domain registrar" company, for an annual fee around $20. They associate your domain with your ID, and designate a DNS for your domain.
  
  Choose a domain registrar that:
  • Will keep your ID private, for free.
  • Supports 2FA on your domain administration account.
  Recommended: Hover, Namecheap.
  
  Ways to own a domain (or sub-domain) without having your name on it:
  Njalla (domain for $15/year)
  FreeDNS (sub-domain for free)
  



• DNS: maps from domain to host's IP address.
  
  Usually you can use the DNS of your domain registar, or the DNS of your hosting service.
  
  Use the DNS of your hosting service, so that the DNS records get updated automatically if they move your site to a new IP address.
  
  How to dump your whole DNS configuration (all the records) into a file for backup purposes ?
  

  # gets some useful info, but not all records:
  nslookup -q=any DOMAINNAME
  
  # gets some useful info, but not all records:
  dig @DNSSERVERNAME ANY -q DOMAINNAME
  
  # about the same:
  dig +nocmd DOMAINNAME any +multiline +answer
  

  DNSChecker's "DNS Lookup" also does not give all records; maybe my hosting service is filtering out a bunch of them. For example, it doesn't show my DMARC record, but DNSChecker's "DMARC Validation" does show an evaluation of that record ! Doesn't show DKIM record.
  
  Script "DNSDump.sh" that does a little better (from here):

  #!/bin/bash
  
  # Usage:
  #   DNSDump.sh DOMAINNAME
  #   DNSDump.sh -x DOMAINNAME
  #   DNSDump.sh DOMAINNAME -s NAMESERVER
  
  set -e; set -u
  COMMON_SUBDOMAINS="www mail mx a.mx smtp pop imap blog en ftp ssh login"
  EXTENDED=""
  
  while :; do case "$1" in
    --) shift; break ;;
    -x) EXTENDED=y; shift ;;
    -s) NS="$2"; shift 2 ;;
    *) break ;;
  esac; done
  DOM="$1"; shift
  TYPE="${1:-any}"
  
  test "${NS:-}" || NS=$(dig +short  SOA "$DOM" | awk '{print $1}')
  test "$NS" && NS="@$NS"
  
  if test "$EXTENDED"; then
    dig +nocmd $NS "$DOM" +noall +answer "$TYPE"
    wild_ips=$(dig +short "$NS" "*.$DOM" "$TYPE" | tr '\n' '|')
    wild_ips="${wild_ips%|}"
    for sub in $COMMON_SUBDOMAINS; do
      dig +nocmd $NS "$sub.$DOM" +noall +answer "$TYPE"
    done | cat  #grep -vE "${wild_ips}"
    dig +nocmd $NS "*.$DOM" +noall +answer "$TYPE"
  else
    dig +nocmd $NS "$DOM" +noall +answer "$TYPE"
  fi
  

  DNSChecker's "Domain DNS Health Checker Tool"
  MXToolBox
  
  I see comments online saying that "get all records" is called a "zone transfer", and this is not allowed without authorization (an "external zone transfer") because it provides lots of info for attackers.



• Host: machine at the IP address.



• Web server: Apache, NGINX, etc.

• Paid shared hosting service: best choice, let the pro's handle it, usually comes with free DNS, lots of additional services available (for a price).
  
  Choose a hosting service that:
  • Supports 2FA on your administration accounts.
  • Supports SFTP to upload files to the server.
  Recommended: Arch Hosting.


• Free shared hosting service: probably limited services, probably no ad money, may have quirks, might not be able to use your own domain name, may go out of business.


• A server machine in your home LAN: bad choice, you have to open an incoming port through your router into your LAN, monitor security, patch software, etc.


• A desktop machine in your home LAN: worst choice, now you're letting incoming traffic into a machine with your important personal data on it.


• Cloud VPS: a virtual Linux machine running in some data center: most flexible, and lets you get hands-on with all the details of web server, database server, etc (if you wish). Digital Ocean. Linode.

• Enable HTTPS access to your site, so your users will have secure connections (no malicious injection by ISP).
  
  Apparently, a free TLS certificate generally won't have your person/organization name in it, and just assures that the connection is secure. But a paid TLS certificate generally WILL have your person/organization name in it, and also serves to assure user that they are connecting to correct person/organization.


• Enable HSTS (HTTP Strict Transport Security).
  IT Igloo's "How to configure HTTP Strict Transport Security (HSTS) on Apache & NGINX"
  


• Implement SubResource Integrity (SRI) if you reference scripts from other sites.
  Terence Eden's "Major sites running unauthenticated JavaScript on their payment pages"
  Mozilla's "Subresource Integrity"
  


• Headers in general:
  Max Veytsman's "Everything you need to know about HTTP security headers"
  


• Change your port 80 vhost so it doesn't serve your site and only has a .htaccess redirect to port 443, which serves your actual site ?


• For best file caching you should have either an ETag directive or If-Modified-Since / If-None-Match directives, but not both ? And ETag doesn't work if your site is being served from multiple servers.
  AskApache's "Speed Tips: Turn Off ETags"
  

• Use an editor that will syntax-check your HTML and CSS and Javascript. I use VSCode.


• Check for broken links (an endless chore).
  
  If you use VSCode editor, I have written an extension (HTML link checker) that does this from within the editor, where it's easy to fix the code.


• Where possible, use HTTPS links instead of HTTP links in your pages, so your users will have secure connections (no malicious injection by ISP).
  
  Use moarTLS browser extension to check your pages for HTTP links. But don't assume that when it says an HTTPS version is available, you can just change the link to HTTPS. Some sites accept HTTPS but give an error or empty page, some give only the home page, some redirect back to the HTTP page.
  
  If you use VSCode editor, I have written an extension (HTML link checker) that does similar checking (and more) from within the editor, where it's easy to fix the code.


• Test for HTML5 compliance.


• Open-source alternative to Google Analytics:
  Freshlytics


• Tools to generate static HTML site (from source markdown files):
  
  Hugo
  MkDocs (more for documentation, not blog or general web site ?)
  
  Mihai Grescenko's "How We Rebuilt Our Documentation Using Hugo"
  
  See "Tried Hugo" section, below.
  
  StaticGen (list of static site generators)
  JAMstack Themes
  

pandoc -f html -t markdown myfile.html >myfile.md

archetypes
content
    sailing
        gettingstarted
		gettingboat
		usingboat
	    places
        magnolia
	    	blog
    computers
    reasoning
    legal
    places
        europe
	    	romaniatrip2016blog
	    	romaniatrip2019blog
	spain
		andalucia
	    	blog
		barcelona
	    	blog
    cartalk
    disasterprep
    presidents
data
layouts
static
    pics1
    pics2
    pics3
themes
    hugo-theme-w3css-basic

hugo new site ./mywebsite
cd mywebsite

# to get ALL themes:
git clone --recursive https://github.com/spf13/hugoThemes ./themes
# to get ONE theme:
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

hugo new SECTIONNAME/FILENAME.FORMAT
# will create file content/SECTIONNAME/FILENAME.FORMAT
# but then no html file is produced in public ???

# Generate site's pages:
rm -fr public
hugo

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT
hugo server
browse to http://localhost:1313

I installed hugo_0.58.2_Linux-64bit.deb. "Extended" version adds Sass/SCSS support; I think this means it can run on a VPS such as DigitalOcean or AWS.

Installer put it in /usr/local/bin/hugo. Do "hugo version" to verify.

Tried Hugo Themes / W3.CSS Basic:

# make site "myweb1" in home directory
cd ~
git clone https://github.com/it-gro/hugo-theme-w3css-basic temp1
cd temp1
mv exampleSite ../myweb1
mkdir ../myweb1/themes
mkdir ../myweb1/themes/hugo-theme-w3css-basic
mv * ../myweb1/themes/hugo-theme-w3css-basic
cd ..
rm -fr temp1

cd myweb1
# edit config.toml:
# change values of baseURL and title
# change I want:
uglyURLs = true
# addition I want:
disablePathToLower = true

cd content
# create index.md file containing any text

cd ..
rm -fr public
hugo
# see that public was created and contains files
ls public

hugo server
# browse to http://localhost:1313
# Site home page appeared !  But I don't see contents of my index.md file.
# close browser tab
ctrl-C to kill server

# Edit config.toml to disable jumbotrons, clients, testimonials,
# photocards, params.marquee, params.features, cookieconsent, params.seeMore
# Comment out setting of disqusShortname to disable it.
# Set disableRSS to true.

rm -fr public
hugo
hugo server
# browse to http://localhost:1313
# Now should see contents of my index.md file.

# Use "preview w3.css color themes" pull-down menu to try different color schemes.
# I like "2017 island-paradise" and "Light blue #87ceeb"
# In config.toml, comment out line for "2018-ceylon-yellow.css"
# and un-comment line for "light-blue.css".
# Maybe you could make your own color-scheme by going to
# themes/hugo-theme-w3css-basic/static/vendor/w3css/4
# and copying and modifying one of the files.
# Docs say "You may create your own monochromatic color theme using
# https://www.w3schools.com/w3css/w3css_color_generator.asp
# and then put the css file under /static/css/w3-theme-custom.css".
# Once you're happy with the color-scheme, you can remove the pull-down
# by changing themeColorSelectorEnable to false.

# add image gallery
https://github.com/liwenyip/hugo-easy-gallery/
content/pages/showcase/gallery-01.md

# STUCK !!! Can't get any *.md file I add under content/ to produce
# a corresponding *.html file under public/.

Tried Hugo Themes / Swift:

# make site "myweb3" in home directory
cd ~
hugo new site ./myweb3
cd myweb3
cd themes
git clone https://github.com/onweru/hugo-swift-theme.git

cd ..
hugo new Reason/Reasoning.md
# edit content/Reason/Reasoning.md

rm -fr public
hugo
# got errors "found no layout file for "HTML" for "page": You should create a template file ..."
# edited config.toml to add line 'theme = "hugo-swift-theme"'

rm -fr public
hugo
# got error "Transformation failed: TOCSS: failed to transform "scss/main.scss"
# (text/x-scss): this feature is not available in your current Hugo version"
# Apparently this theme is using SCSS, only available in Hugo extended.

# So, I downloaded the "extended" deb file and installed over top of existing Hugo.
# Maybe could have done "snap refresh hugo --channel=extended" instead ?
rm -fr public
hugo

hugo server
# browse to http://localhost:1313
# Site works, I see home page and my added Reasoning.md file

# copied menu.yml file from themes/hugo-swift-theme/exampleSite/data/ to top data/

# added more files in content/Reasoning folder, and they all show up as
# tiles/cards/posts on the home page, not what I want.

hugo new Presidents/Presidents.md
# also shows up as a tile on home page, not what I want.
# I can't find how this is happening.

Tried Hugo Themes / Academic:

# make site "myweb4" in home directory
cd ~
hugo new site ./myweb4
cd myweb4
cd themes
git clone https://github.com/gcushen/hugo-academic.git

cd ..
git init
git submodule update --init --recursive

rm -fr public
hugo
# errors, lots of stuff missing

# tried copying everything up from exampleSite to main
# directory, got different errors

# edited config.toml to add line 'theme = "hugo-academic"'

# edit config/_default/params.toml to set "color_theme" as desired

# https://sourcethemes.com/academic/docs/get-started/

Tried Hugo ReFresh:

# make site "myweb5" in home directory
cd ~
hugo new site ./myweb5 && cd myweb5
git init
git submodule add https://github.com/PippoRJ/hugo-refresh.git themes/hugo-refresh
rm config.toml
curl -O https://raw.githubusercontent.com/PippoRJ/hugo-refresh/master/exampleSite/config.yaml

rm -fr public
hugo server -D

# edit config.yaml file

# site works, but again I don't see where index.html is being generated,
# don't see how to change it to a page of icons as I want.

I started from a handcrafted HTML web site, with inline Javascript on some pages, and Google ads.

Hugo processes images to make the site; I think I want to disable that.

• Connection and header tests:
  
  Qualys SSL Labs' "SSL Server Test"
  dataskydd.net's "How privacy-friendly is your site?"
  Mozilla's "Observatory"
  CSP Evaluator
  Security Header Scanner
  ImmuniWeb's "Website Security Test"
  crt.sh's "Certificate Search"
  


• Test validity of .htaccess file:
  
  .htaccess check
  


• Test validity of HTML:
  
  W3C Markup Validation Service
  


• Test/view DNS information:
  
  ViewDNS.info
  Manytools
  Online-Domain-Tools
  


• Test how web pages look on various devices:
  
  
  • MobileTest.me
    Had to comment out setting of X-Frame-Options to 'deny' in my site's .htaccess file.
    Got it working in Chromium, but not in Firefox.
    It doesn't replicate a weird button-sizing issue someone saw with my site on an iPhone.
    
  
  
  • mobiReady
  
  
  • In Chrome or Chromium browsers:
    Go to web page, then F12 for Developer's Tools. Click Toggle Device Toolbar button (looks like two overlapping rectangles) or Ctrl-Shift-M to turn Device Mode on or off (icon is blue when on). Select device with the Viewport Controls (pull-down menu that starts as "Responsive"). Refresh web page. Every time you change device type, refresh page again.
  
  

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://www.billdietrich.me/$1 [R,L]

Header set Strict-Transport-Security "max-age=31536000" includeSubDomains env=HTTPS

Header set Strict-Transport-Security "max-age=31536000; includeSubDomains" env=HTTPS

Header set X-Frame-Options "deny"
Header set X-XSS-Protection "1; mode=block"

Header set X-Content-Type-Options "nosniff"
Header set Content-Security-Policy "object-src 'self';"
Header set Content-Security-Policy "script-src 'unsafe-inline';"
Header set Content-Security-Policy "style-src 'self' 'unsafe-inline';"
Header set Content-Security-Policy "frame-ancestors 'none';"

Header set Referrer-Policy "no-referrer-when-downgrade"
Header set Feature-Policy "payment 'none'; notifications 'none'; microphone 'none'; camera 'none'"
Header set Expect-CT "enforce; max-age=600"

Contact: mailto:admin@billdietrich.me

Header set Content-Security-Policy "default-src 'self';"
Header set Content-Security-Policy "script-src 'self' 'unsafe-inline' *.google-analytics.com *.googleapis.com *.googlesyndication.com *.google.com *.googletagmanager.com *.gstatic.com *.addthis.com;"
Header set Content-Security-Policy "style-src 'self' 'unsafe-inline' *.google-analytics.com *.googleapis.com *.googlesyndication.com *.google.com *.googletagmanager.com *.gstatic.com *.addthis.com;"

• Home
• Computers
• Your Personal Web Site