Skip to content

Commit 2d82746

Browse files
committed
feat: Add GitHub Pages deployment configuration
1 parent 54c0a37 commit 2d82746

5 files changed

Lines changed: 196 additions & 7 deletions

File tree

.github/workflows/deploy.yml

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v3
14+
15+
- name: Set up Elixir
16+
uses: erlef/setup-beam@v1
17+
with:
18+
elixir-version: '1.15.7'
19+
otp-version: '26.2.1'
20+
21+
- name: Restore dependencies cache
22+
uses: actions/cache@v3
23+
with:
24+
path: |
25+
deps
26+
_build
27+
key: ${{ runner.os }}-mix-${{ hashFiles('**/mix.lock') }}
28+
restore-keys: ${{ runner.os }}-mix-
29+
30+
- name: Install dependencies
31+
run: mix deps.get
32+
33+
- name: Install Node.js
34+
uses: actions/setup-node@v3
35+
with:
36+
node-version: '18'
37+
38+
- name: Install npm dependencies
39+
run: |
40+
cd assets
41+
npm install
42+
43+
- name: Build assets
44+
run: |
45+
cd assets
46+
npm run deploy
47+
cd ..
48+
mix assets.deploy
49+
50+
- name: Build static files
51+
run: mix phx.digest
52+
53+
- name: Deploy to GitHub Pages
54+
uses: peaceiris/actions-gh-pages@v3
55+
with:
56+
github_token: ${{ secrets.GITHUB_TOKEN }}
57+
publish_dir: ./priv/static
58+
force_orphan: true

assets/js/app.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,18 @@ import topbar from "../vendor/topbar"
2424

2525
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
2626
let liveSocket = new LiveSocket("/live", Socket, {
27-
longPollFallbackMs: 2500,
28-
params: {_csrf_token: csrfToken}
27+
params: {_csrf_token: csrfToken},
28+
hooks: {
29+
mounted() {
30+
// Handle base URL for GitHub Pages
31+
const baseUrl = window.location.hostname === 'katibest.github.io' ? '/kati_portfolio' : '';
32+
document.querySelectorAll('a').forEach(link => {
33+
if (link.getAttribute('href')?.startsWith('/')) {
34+
link.setAttribute('href', baseUrl + link.getAttribute('href'));
35+
}
36+
});
37+
}
38+
}
2939
})
3040

3141
// Show progress bar on live navigation and form submits

assets/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "kati_portfolio",
3+
"version": "1.0.0",
4+
"description": "Kati Best Portfolio",
5+
"scripts": {
6+
"deploy": "NODE_ENV=production webpack --mode production",
7+
"watch": "webpack --mode development --watch"
8+
},
9+
"dependencies": {
10+
"phoenix": "file:../deps/phoenix",
11+
"phoenix_html": "file:../deps/phoenix_html",
12+
"phoenix_live_view": "file:../deps/phoenix_live_view"
13+
},
14+
"devDependencies": {
15+
"@babel/core": "^7.0.0",
16+
"@babel/preset-env": "^7.0.0",
17+
"babel-loader": "^8.0.0",
18+
"css-loader": "^5.0.0",
19+
"mini-css-extract-plugin": "^1.0.0",
20+
"optimize-css-assets-webpack-plugin": "^5.0.0",
21+
"terser-webpack-plugin": "^4.0.0",
22+
"webpack": "4.46.0",
23+
"webpack-cli": "^3.3.0"
24+
}
25+
}

config/config.exs

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,99 @@ config :phoenix, :json_library, Jason
5656
# Import environment specific config. This must remain at the bottom
5757
# of this file so it overrides the configuration defined above.
5858
import_config "#{config_env()}.exs"
59+
60+
# config/runtime.exs is executed for all environments, including
61+
# during releases. It is executed after compilation and before the
62+
# system starts, so it is typically used to load production configuration
63+
# and secrets from environment variables or elsewhere. Do not define
64+
# any compile-time configuration in here, as it won't be applied.
65+
66+
if config_env() == :prod do
67+
database_url =
68+
System.get_env("DATABASE_URL") ||
69+
raise """
70+
environment variable DATABASE_URL is missing.
71+
For example: ecto://USER:PASS@HOST/DATABASE
72+
"""
73+
74+
maybe_ipv6 = if System.get_env("ECTO_IPV6") in ~w(true 1), do: [:inet6], else: []
75+
76+
config :kati_portfolio, KatiPortfolio.Repo,
77+
# ssl: true,
78+
url: database_url,
79+
pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10"),
80+
socket_options: maybe_ipv6
81+
82+
# The secret key base is used to sign/encrypt cookies and other secrets.
83+
# A default value is used in config/dev.exs and config/test.exs but you
84+
# want to use a different value for prod and you most likely don't want
85+
# to check this value into version control, so we use an environment
86+
# variable instead.
87+
secret_key_base =
88+
System.get_env("SECRET_KEY_BASE") ||
89+
raise """
90+
environment variable SECRET_KEY_BASE is missing.
91+
You can generate one by calling: mix phx.gen.secret
92+
"""
93+
94+
host = System.get_env("PHX_HOST") || "katibest.github.io"
95+
port = String.to_integer(System.get_env("PORT") || "4000")
96+
97+
config :kati_portfolio, KatiPortfolioWeb.Endpoint,
98+
url: [host: host, port: 443, scheme: "https"],
99+
http: [
100+
# Enable IPv6 and bind on all interfaces.
101+
# Set it to {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
102+
# See the documentation on https://hexdocs.pm/bandit/Bandit.html#t:options/0
103+
ip: {0, 0, 0, 0, 0, 0, 0, 0},
104+
port: port
105+
],
106+
secret_key_base: secret_key_base
107+
108+
# ## SSL Support
109+
#
110+
# To get SSL working, you will need to add the `https` key
111+
# to your endpoint configuration:
112+
#
113+
# config :kati_portfolio, KatiPortfolioWeb.Endpoint,
114+
# https: [
115+
# ...,
116+
# port: 443,
117+
# cipher_suite: :strong,
118+
# keyfile: System.get_env("SSL_KEYFILE"),
119+
# certfile: System.get_env("SSL_CERTFILE")
120+
# ]
121+
#
122+
# The `cipher_suite` is set to `:strong` to support only the
123+
# latest and more secure SSL ciphers. This means old browsers
124+
# and clients may not be supported. You can set it to
125+
# `:compatible` for wider support.
126+
#
127+
# `:keyfile` and `:certfile` expect an absolute path to the key
128+
# and cert in disk or a relative path inside priv, for example
129+
# "priv/ssl/server.key". For all supported SSL configuration
130+
# options, see https://hexdocs.pm/bandit/Bandit.html#t:options/0
131+
132+
# ## Configuring the mailer
133+
#
134+
# In production you need to configure the mailer to use a different adapter.
135+
# Also, you may need to configure the Swoosh API client of your choice if you
136+
# are not using SMTP. Here is an example of the configuration:
137+
#
138+
# config :kati_portfolio, KatiPortfolio.Mailer,
139+
# adapter: Swoosh.Adapters.Mailgun,
140+
# api_key: System.get_env("MAILGUN_API_KEY"),
141+
# domain: System.get_env("MAILGUN_DOMAIN")
142+
#
143+
# For this example you need include a HTTP client required by Swoosh API client.
144+
# Swoosh supports Hackney and Finch out of the box:
145+
#
146+
# config :swoosh, :api_client, Swoosh.ApiClient.Hackney
147+
#
148+
# See https://hexdocs.pm/swoosh/Swoosh.html#module-installation for details.
149+
end
150+
151+
# Configure the base URL for GitHub Pages
152+
config :kati_portfolio, KatiPortfolioWeb.Endpoint,
153+
url: [scheme: "https", host: "katibest.github.io", port: 443],
154+
force_ssl: [rewrite_on: [:x_forwarded_proto]]

lib/kati_portfolio_web/controllers/page_html/home.html.heex

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<span x-bind:class="'inline-block bg-goldpeach text-white px-10 py-4 rounded-full font-semibold text-xl mb-6 min-w-[180px] text-center transition-transform duration-300 transform-gpu ' + (flipped ? 'rotate-y-180' : '')" x-text="current"></span>
2222
</div>
2323
<p class="text-white text-base md:text-lg max-w-md mx-auto md:mx-0">I'm Kati (aka the person behind the computer)! I've been product designer for almost ten years, creating designs that are not only pleasing to the eye but with thoughtful user experience.</p>
24-
</div>
24+
</div>
2525
<div class="md:w-1/2 flex justify-center">
2626
<img src="/images/experience.jpg" alt="Kati Best collaborating with a colleague on a laptop" class="rounded-2xl shadow-lg w-72 h-72 object-cover">
2727
</div>
@@ -65,12 +65,12 @@
6565
<span class="text-gray-400 text-xs">2022</span>
6666
</a>
6767
</div>
68-
</div>
68+
</div>
6969
</section>
7070
<!-- Wavy Divider -->
7171
<div class="w-full overflow-hidden leading-none" style="height: 48px; margin-bottom: -1px;">
7272
<svg viewBox="0 0 1440 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#d3e7e2" d="M0,0 C480,48 960,0 1440,48 L1440,48 L0,48 Z"></path></svg>
73-
</div>
73+
</div>
7474

7575
<!-- Experience Section -->
7676
<section class="bg-white py-16">
@@ -100,7 +100,7 @@
100100
<div class="flex flex-col items-center w-full md:w-1/2">
101101
<img src="/images/me-1.jpg" alt="Kati Best" class="rounded-2xl shadow-lg w-48 h-72 object-cover mb-2">
102102
<span class="inline-block bg-goldpeach text-white px-4 py-1 rounded-full font-semibold">KATI BEST</span>
103-
</div>
103+
</div>
104104
<div class="flex flex-col gap-6 w-full md:w-1/2">
105105
<div class="flex flex-col items-center">
106106
<img src="/images/birthday-3.jpg" alt="Rocket Dog" class="rounded-2xl shadow-lg w-32 h-32 object-cover mb-2">
@@ -147,7 +147,7 @@
147147
<li>EngageWIT</li>
148148
<li>Photography</li>
149149
</ul>
150-
</div>
150+
</div>
151151
</div>
152152
</footer>
153153
</div>

0 commit comments

Comments
 (0)